@neoptocom/neopto-ui 1.4.4 → 1.5.1

package/src/{stories → components}/Button.stories.tsx

@@ -1,24 +1,25 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "../components/Button";
-import Icon from "../components/Icon";
-import Typo from "../components/Typo";
+import Icon from "./Icon";
+import Typo from "./Typo";
+import { Button } from "./Button";
 
 const meta: Meta<typeof Button> = {
   title: "Components/Button",
   component: Button,
+  tags: ["autodocs"],
   args: {
-    children: "Button",
+    children: "Primary action",
     variant: "primary",
     size: "md",
     disabled: false
   },
   argTypes: {
     variant: {
-      control: "radio",
+      control: "inline-radio",
       options: ["primary", "secondary", "ghost"]
     },
     size: {
-      control: "radio", 
+      control: "inline-radio",
       options: ["sm", "md", "lg"]
     },
     fullWidth: {
@@ -39,13 +40,19 @@ export const Variants: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-4">
       <Button variant="primary">
-        <Typo variant="title-sm" bold="semibold">Primary</Typo>
+        <Typo variant="title-sm" bold="semibold">
+          Primary
+        </Typo>
       </Button>
       <Button variant="secondary">
-        <Typo variant="title-sm" bold="semibold">Secondary</Typo>
+        <Typo variant="title-sm" bold="semibold">
+          Secondary
+        </Typo>
       </Button>
       <Button variant="ghost">
-        <Typo variant="title-sm" bold="semibold">Ghost</Typo>
+        <Typo variant="title-sm" bold="semibold">
+          Ghost
+        </Typo>
       </Button>
     </div>
   )
@@ -55,29 +62,19 @@ export const Sizes: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-4">
       <Button size="sm">
-        <Typo variant="title-sm" bold="semibold">Small</Typo>
+        <Typo variant="title-sm" bold="semibold">
+          Small
+        </Typo>
       </Button>
       <Button size="md">
-        <Typo variant="title-sm" bold="semibold">Medium</Typo>
+        <Typo variant="title-sm" bold="semibold">
+          Medium
+        </Typo>
       </Button>
       <Button size="lg">
-        <Typo variant="title-sm" bold="semibold">Large</Typo>
-      </Button>
-    </div>
-  )
-};
-
-export const States: Story = {
-  render: () => (
-    <div className="flex flex-wrap items-center gap-4">
-      <Button>
-        <Typo variant="title-sm" bold="semibold">Default</Typo>
-      </Button>
-      <Button disabled>
-        <Typo variant="title-sm" bold="semibold">Disabled</Typo>
-      </Button>
-      <Button fullWidth>
-        <Typo variant="title-sm" bold="semibold">Full Width</Typo>
+        <Typo variant="title-sm" bold="semibold">
+          Large
+        </Typo>
       </Button>
     </div>
   )
@@ -88,16 +85,26 @@ export const WithIcons: Story = {
     <div className="flex flex-wrap items-center gap-4">
       <Button>
         <Icon name="add" />
-        <Typo variant="title-sm" bold="semibold">Add Item</Typo>
+        <span>Add Item</span>
       </Button>
       <Button variant="secondary">
-        <Icon name="delete" />
-        <Typo variant="title-sm" bold="semibold">Delete</Typo>
+        <Icon name="download" />
+        <span>Download</span>
       </Button>
       <Button variant="ghost">
         <Icon name="settings" />
-        <Typo variant="title-sm" bold="semibold">Settings</Typo>
+        <span>Settings</span>
       </Button>
     </div>
   )
 };
+
+export const FullWidthCallToAction: Story = {
+  args: {
+    fullWidth: true,
+    size: "lg",
+    children: "Start free trial"
+  }
+};
+
+

package/src/components/Card.docs.mdx

@@ -0,0 +1,56 @@
+import { Meta, Canvas, Story, ArgsTable } from "@storybook/blocks";
+import { Card } from "./Card";
+import * as CardStories from "./Card.stories";
+
+<Meta of={CardStories} />
+
+# Card
+
+Cards provide glassmorphic containers for grouping content. They offer decorative borders, elevated
+shadows, and an app-background variant that mirrors hero surfaces.
+
+## Usage
+
+```tsx
+import { Card } from "@neoptocom/neopto-ui";
+
+<Card>
+  <h3>Weekly summary</h3>
+  <p>Use cards to separate content into digestible surfaces.</p>
+</Card>;
+```
+
+<Canvas>
+  <Story of={CardStories.Playground} />
+</Canvas>
+
+<ArgsTable of={CardStories.Playground} />
+
+## Variants
+
+- `showDecorations` adds gradient strokes suited for marketing hero cards.
+- `variant="app-background"` injects the NeoPTO hero artwork and auto-switches with theme.
+- `elevated` applies a high-emphasis drop shadow—combine with default or app backgrounds.
+
+<Canvas>
+  <Story of={CardStories.AppBackground} />
+</Canvas>
+
+## Layout tips
+
+- Allow cards to breathe: default padding is `p-6`, override via the `className` prop for custom
+  spacing.
+- Stack cards in responsive grids to create dashboards or settings panels.
+- Avoid nesting too many cards; use muted surfaces inside when grouping secondary information.
+
+<Canvas>
+  <Story of={CardStories.DashboardLayout} />
+</Canvas>
+
+## Accessibility
+
+Cards render as semantic `<div>` elements. Provide meaningful headings and maintain contrast ratios
+when overlaying text on app backgrounds. For interactive cards, wrap focusable elements instead of
+attaching click handlers to the card root.
+
+

package/src/components/Card.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+import Typo from "./Typo";
+import { Card } from "./Card";
+
+const meta: Meta<typeof Card> = {
+  title: "Components/Card",
+  component: Card,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded"
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <div className="max-w-md">
+      <Card {...args}>
+        <Typo variant="headline-sm" bold="semibold">
+          Glassmorphic card
+        </Typo>
+        <Typo variant="body-sm" className="mt-2 text-[var(--muted-fg)]">
+          Cards wrap related content with elevated styling and optional backgrounds.
+        </Typo>
+      </Card>
+    </div>
+  ),
+  args: {
+    children: undefined
+  }
+};
+
+export const WithDecorations: Story = {
+  render: () => (
+    <div className="max-w-md">
+      <Card showDecorations>
+        <Typo variant="headline-sm" bold="semibold">
+          Decorative frame
+        </Typo>
+        <Typo variant="body-sm" className="mt-2 text-[var(--muted-fg)]">
+          Enable gradient borders for hero cards or marketing content.
+        </Typo>
+      </Card>
+    </div>
+  )
+};
+
+export const AppBackground: Story = {
+  render: () => (
+    <div className="max-w-lg">
+      <Card variant="app-background" className="p-8">
+        <Typo variant="headline-sm" bold="semibold">
+          App background variant
+        </Typo>
+        <Typo variant="body-sm" className="mt-3 text-[var(--muted-fg)]">
+          Uses the same artwork as the `AppBackground` component and adapts to theme changes.
+        </Typo>
+        <div className="mt-6 flex gap-3">
+          <Button variant="primary">Get started</Button>
+          <Button variant="secondary">Learn more</Button>
+        </div>
+      </Card>
+    </div>
+  )
+};
+
+export const ElevatedComparison: Story = {
+  render: () => (
+    <div className="grid max-w-3xl grid-cols-1 gap-6 md:grid-cols-2">
+      <Card>
+        <Typo variant="title-md" bold="semibold">
+          Default
+        </Typo>
+        <Typo variant="body-sm" className="mt-2 text-[var(--muted-fg)]">
+          Soft glassmorphism without drop shadow.
+        </Typo>
+      </Card>
+      <Card elevated>
+        <Typo variant="title-md" bold="semibold">
+          Elevated
+        </Typo>
+        <Typo variant="body-sm" className="mt-2 text-[var(--muted-fg)]">
+          Adds `var(--shadow-elevated)` for emphasis and layering.
+        </Typo>
+      </Card>
+    </div>
+  )
+};
+
+export const DashboardLayout: Story = {
+  render: () => (
+    <div className="grid max-w-4xl gap-6 md:grid-cols-3">
+      <Card>
+        <Typo variant="title-md" bold="semibold">
+          Daily active users
+        </Typo>
+        <Typo variant="display-sm" bold="bold" className="mt-4">
+          1,248
+        </Typo>
+        <Typo variant="body-sm" className="mt-2 text-[var(--success)]">
+          +12% vs last week
+        </Typo>
+      </Card>
+      <Card elevated>
+        <Typo variant="title-md" bold="semibold">
+          New signups
+        </Typo>
+        <Typo variant="display-sm" bold="bold" className="mt-4">
+          327
+        </Typo>
+        <Typo variant="body-sm" className="mt-2 text-[var(--muted-fg)]">
+          Compared to rolling average
+        </Typo>
+      </Card>
+      <Card showDecorations>
+        <Typo variant="title-md" bold="semibold">
+          Retention cohort
+        </Typo>
+        <Typo variant="body-sm" className="mt-3 text-[var(--muted-fg)]">
+          Combine props to create data-heavy layouts with visual hierarchy.
+        </Typo>
+      </Card>
+    </div>
+  )
+};
+

package/src/components/Chip.tsx

@@ -9,6 +9,8 @@ export type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
   backgroundColor?: string;
   /** Custom text color (overrides variant) */
   textColor?: string;
+  /** Optional handler to render a delete affordance */
+  onDelete?: React.MouseEventHandler<HTMLButtonElement>;
 };
 
 export default function Chip({
@@ -19,6 +21,7 @@ export default function Chip({
   backgroundColor,
   textColor,
   style,
+  onDelete,
   ...props
 }: ChipProps) {
   const base =
@@ -42,17 +45,27 @@ export default function Chip({
   const mergedStyle: React.CSSProperties = {
     ...style,
     ...(backgroundColor && { backgroundColor }),
-    ...(textColor && { color: textColor }),
+    ...(textColor && { color: textColor })
   };
 
   return (
-    <div 
-      className={[base, colorClasses, className].join(" ")} 
+    <div
+      className={[base, colorClasses, className].join(" ")}
       style={mergedStyle}
       {...props}
     >
       {icon ? <Icon name={icon} size="sm" className="mr-0.5" /> : null}
       <span>{label}</span>
+      {onDelete ? (
+        <button
+          type="button"
+          onClick={onDelete}
+          className="ml-1 flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-black/30"
+          aria-label="Remove"
+        >
+          <Icon name="close" size="sm" />
+        </button>
+      ) : null}
     </div>
   );
 }

package/src/components/Input.tsx

@@ -1,36 +1,121 @@
 import * as React from "react";
 
-export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
   /** Input visual variant */
   variant?: "default" | "inline";
+  /** Optional floating label (renders a fieldset wrapper when provided) */
+  label?: string;
+  /** Additional props for the surrounding fieldset when label is set */
+  fieldsetProps?: React.FieldsetHTMLAttributes<HTMLFieldSetElement>;
+  /** Additional props for the legend when label is set */
+  legendProps?: React.HTMLAttributes<HTMLLegendElement>;
+  /** Flag to visually mark the input as errored */
+  error?: boolean;
 };
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, disabled, variant = "default", ...props }, ref) => {
-    const isInline = variant === "inline";
-    
+  (
+    {
+      className,
+      disabled,
+      variant = "default",
+      label,
+      fieldsetProps,
+      legendProps,
+      error = false,
+      ...props
+    },
+    ref
+  ) => {
+    const isInlineVariant = variant === "inline";
+    const shouldUseInlineStyles = isInlineVariant || Boolean(label);
+    const isError = error && !disabled;
+
+    const inputClasses: string[] = [
+      "w-full bg-transparent outline-none transition-colors",
+      shouldUseInlineStyles ? "h-9" : "h-12 px-4 rounded-full",
+      "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]"
+    ];
+
+    if (!shouldUseInlineStyles) {
+      inputClasses.push("border");
+    }
+
+    if (disabled) {
+      inputClasses.push("text-[#3F424F]", "cursor-not-allowed");
+      if (!shouldUseInlineStyles) {
+        inputClasses.push("border-[#3F424F]");
+      }
+    } else {
+      inputClasses.push("text-[var(--muted-fg)]", "focus:text-[var(--fg)]");
+      if (!shouldUseInlineStyles) {
+        inputClasses.push(
+          isError ? "border-[var(--destructive)]" : "border-[var(--muted-fg)]",
+          isError ? "hover:border-[var(--destructive)]" : "hover:border-[var(--border)]",
+          isError ? "focus:border-[var(--destructive)]" : "focus:border-[var(--color-brand)]"
+        );
+      }
+    }
+
+    if (className) {
+      inputClasses.push(className);
+    }
+
+    const inputClassName = inputClasses.join(" ");
+
+    const inputElement = (
+      <input ref={ref} disabled={disabled} className={inputClassName} {...props} />
+    );
+
+    if (!label) {
+      return inputElement;
+    }
+
+    const { className: fieldsetClassNameProp = "", ...restFieldsetProps } = fieldsetProps ?? {};
+
+    const { className: legendClassNameProp = "", ...restLegendProps } = legendProps ?? {};
+
+    const fieldsetClassName = [
+      "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-14",
+      isError ? "border-[var(--destructive)]" : "border-[var(--border)]",
+      isError
+        ? "focus-within:border-[var(--destructive)]"
+        : "focus-within:border-[var(--color-brand)]",
+      disabled ? "opacity-60 cursor-not-allowed" : "",
+      fieldsetClassNameProp
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const legendColorClass = disabled
+      ? "text-[var(--muted-fg)]"
+      : isError
+      ? "text-[var(--destructive)]"
+      : "text-[var(--muted-fg)]";
+
+    const legendClassNameCombined = [
+      "ml-4 px-1 text-sm leading-none relative font-normal select-none",
+      legendColorClass,
+      legendClassNameProp
+    ]
+      .filter(Boolean)
+      .join(" ");
+
     return (
-      <input
-        ref={ref}
-        disabled={disabled}
-        className={[
-          "w-full bg-transparent outline-none transition-colors",
-          isInline ? "" : "h-12 px-4 rounded-full",
-          "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]",
-          !isInline && "border",
-          disabled
-            ? "text-[#3F424F] cursor-not-allowed" + (isInline ? "" : " border-[#3F424F]")
-            : [
-                "text-[var(--muted-fg)]",
-                isInline ? "" : "border-[var(--muted-fg)]",
-                isInline ? "" : "hover:border-[var(--border)]",
-                "focus:text-[var(--fg)]",
-                isInline ? "" : "focus:border-[var(--color-brand)]"
-              ].join(" "),
-          className
-        ].join(" ")}
-        {...props}
-      />
+      <fieldset
+        {...restFieldsetProps}
+        className={fieldsetClassName}
+      >
+        <legend
+          {...restLegendProps}
+          className={legendClassNameCombined}
+        >
+          {label}
+        </legend>
+        <div className="relative flex pl-5 pr-3 pb-1 h-full">
+          <div className="flex w-full">{inputElement}</div>
+        </div>
+      </fieldset>
     );
   }
 );

package/src/stories/Chip.stories.tsx

@@ -33,4 +33,19 @@ export const Variants: Story = {
   )
 };
 
+export const Deletable: Story = {
+  args: {
+    label: "Filter: Active",
+    variant: "light",
+    onDelete: () => console.log("delete")
+  },
+  render: (args) => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Chip {...args} onDelete={args.onDelete} />
+      <Chip label="Team: Core" onDelete={args.onDelete} variant="dark" />
+      <Chip label="Status: Pending" onDelete={args.onDelete} variant="warning" />
+    </div>
+  )
+};
+
 

package/src/stories/Input.stories.tsx

@@ -47,3 +47,29 @@ export const Inline: Story = {
     </div>
   )
 };
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <Input label="Project name" placeholder="Neo PTO" />
+      <Input label="Email" type="email" placeholder="you@example.com" />
+      <Input label="Password" type="password" placeholder="••••••••" />
+      <Input label="Disabled field" placeholder="Not editable" disabled />
+    </div>
+  )
+};
+
+export const Error: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <Input error placeholder="Unlabeled error" />
+      <Input label="Email" type="email" placeholder="you@example.com" error />
+      <Input
+        label="Password"
+        type="password"
+        placeholder="This is required"
+        error
+      />
+    </div>
+  )
+};