Layout morph

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { LayoutMorph } from "@/components/vip-ui/layout-morph";const captions = [  { title: "First light", detail: "The wall before the room wakes up." },  {    title: "After the rain",    detail:      "A longer note about what happens when color returns to the street after the storm passes through.",  },];export function LayoutMorphDemo() {  const [index, setIndex] = useState(0);  return (    <div className="grid w-full max-w-sm gap-3">      <LayoutMorph        contentKey={index}        className="rounded-xl border border-border bg-card px-5 py-4 shadow-[var(--shadow-card)]"      >        <p className="text-xl font-semibold tracking-tight">          {captions[index].title}        </p>        <p className="mt-2 text-sm leading-6 text-muted-foreground">          {captions[index].detail}        </p>      </LayoutMorph>      <div>        <Button          size="sm"          variant="secondary"          onPress={() => setIndex((value) => (value + 1) % captions.length)}        >          Next caption        </Button>      </div>    </div>  );}

"use client";import { useState } from "react";import { LayoutMorph } from "@/components/vip-ui/layout-morph";import { ToggleButton } from "@/components/vip-ui/toggle-button";import { ToggleButtonGroup } from "@/components/vip-ui/toggle-button-group";const plans = {  monthly: {    price: "$12 per month",    features: ["Unlimited projects", "Shared libraries"],  },  yearly: {    price: "$120 per year",    features: [      "Unlimited projects",      "Shared libraries",      "Version history",      "Priority support",    ],  },} as const;export function LayoutMorphViewsDemo() {  const [plan, setPlan] = useState<keyof typeof plans>("monthly");  const { price, features } = plans[plan];  return (    <div className="grid w-full max-w-xs gap-3">      <ToggleButtonGroup        aria-label="Billing period"        selectionMode="single"        disallowEmptySelection        selectedKeys={[plan]}        onSelectionChange={(keys) => {          const [key] = keys;          if (key === "monthly" || key === "yearly") setPlan(key);        }}      >        <ToggleButton id="monthly" variant="segmented">          Monthly        </ToggleButton>        <ToggleButton id="yearly" variant="segmented">          Yearly        </ToggleButton>      </ToggleButtonGroup>      <LayoutMorph        contentKey={plan}        className="rounded-xl border border-border bg-card px-4 py-3 shadow-[var(--shadow-card)]"      >        <p className="text-lg font-semibold tracking-tight">{price}</p>        <ul className="mt-3 grid gap-1.5 text-sm text-muted-foreground">          {features.map((feature) => (            <li key={feature}>{feature}</li>          ))}        </ul>      </LayoutMorph>    </div>  );}

"use client";import { CheckIcon, WarningIcon } from "@phosphor-icons/react";import { useState } from "react";import { LayoutMorph } from "@/components/vip-ui/layout-morph";import { Spinner } from "@/components/vip-ui/spinner";import { ToggleButton } from "@/components/vip-ui/toggle-button";import { ToggleButtonGroup } from "@/components/vip-ui/toggle-button-group";const states = {  saved: { name: "Saved", label: "Saved" },  saving: { name: "Saving", label: "Saving changes" },  failed: { name: "Failed", label: "Could not save. Check your connection." },} as const;type State = keyof typeof states;export function LayoutMorphWidthDemo() {  const [state, setState] = useState<State>("saved");  return (    <div className="grid w-full max-w-sm justify-items-center gap-4">      <LayoutMorph        contentKey={state}        className="w-fit max-w-full rounded-full border border-border bg-card px-3.5 py-1.5 text-sm shadow-[var(--shadow-card)]"      >        <span className="flex items-center gap-2 whitespace-nowrap">          {state === "saved" && (            <CheckIcon              size={14}              weight="bold"              aria-hidden="true"              className="text-success"            />          )}          {state === "saving" && <Spinner size="xs" decorative />}          {state === "failed" && (            <WarningIcon              size={14}              weight="bold"              aria-hidden="true"              className="text-destructive"            />          )}          {states[state].label}        </span>      </LayoutMorph>      <ToggleButtonGroup        aria-label="Save state"        selectionMode="single"        disallowEmptySelection        selectedKeys={[state]}        onSelectionChange={(keys) => {          const [key] = keys;          if (key === "saved" || key === "saving" || key === "failed")            setState(key);        }}      >        {Object.entries(states).map(([id, { name }]) => (          <ToggleButton key={id} id={id} variant="segmented">            {name}          </ToggleButton>        ))}      </ToggleButtonGroup>    </div>  );}