@neoptocom/neopto-ui 0.13.0 → 1.0.0

package/dist/index.cjs

@@ -153,6 +153,7 @@ function Card({
   style,
   showDecorations = false,
   variant = "default",
+  elevated = false,
   ...props
 }) {
   const isAppBackground = variant === "app-background";
@@ -164,7 +165,8 @@ function Card({
     // Safari support
     color: "var(--fg)",
     overflow: "hidden",
-    transition: "background-color 0.3s ease, color 0.3s ease",
+    transition: "background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease",
+    boxShadow: elevated ? "var(--shadow-elevated)" : void 0,
     ...style,
     // Apply position: relative by default, but allow user override via style prop
     position: style?.position || "relative"
@@ -262,22 +264,23 @@ function Card({
 }
 var Input = React2__namespace.forwardRef(
   ({ className, disabled, variant = "default", ...props }, ref) => {
-    const isBorderless = variant === "borderless";
+    const isInline = variant === "inline";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         ref,
         disabled,
         className: [
-          "w-full h-12 px-4 rounded-full bg-transparent outline-none transition-colors",
+          "w-full bg-transparent outline-none transition-colors",
+          isInline ? "" : "h-12 px-4 rounded-full",
           "text-sm placeholder:text-[var(--muted-fg)]",
-          !isBorderless && "border",
-          disabled ? "text-[#3F424F] cursor-not-allowed" + (isBorderless ? "" : " border-[#3F424F]") : [
+          !isInline && "border",
+          disabled ? "text-[#3F424F] cursor-not-allowed" + (isInline ? "" : " border-[#3F424F]") : [
             "text-[var(--muted-fg)]",
-            isBorderless ? "" : "border-[var(--muted-fg)]",
-            isBorderless ? "" : "hover:border-[var(--border)]",
+            isInline ? "" : "border-[var(--muted-fg)]",
+            isInline ? "" : "hover:border-[var(--border)]",
             "focus:text-[var(--fg)]",
-            isBorderless ? "" : "focus:border-[var(--color-brand)]"
+            isInline ? "" : "focus:border-[var(--color-brand)]"
           ].join(" "),
           className
         ].join(" "),

package/dist/index.d.cts

@@ -49,16 +49,18 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     showDecorations?: boolean;
     /** Card variant (default: "default") */
     variant?: "default" | "app-background";
+    /** Apply elevated shadow effect (default: false) */
+    elevated?: boolean;
 };
-declare function Card({ children, className, style, showDecorations, variant, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ children, className, style, showDecorations, variant, elevated, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
 type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
     /** Input visual variant */
-    variant?: "default" | "borderless";
+    variant?: "default" | "inline";
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Input visual variant */
-    variant?: "default" | "borderless";
+    variant?: "default" | "inline";
 } & React.RefAttributes<HTMLInputElement>>;
 
 type ModalProps = {

package/dist/index.d.ts

@@ -49,16 +49,18 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
     showDecorations?: boolean;
     /** Card variant (default: "default") */
     variant?: "default" | "app-background";
+    /** Apply elevated shadow effect (default: false) */
+    elevated?: boolean;
 };
-declare function Card({ children, className, style, showDecorations, variant, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ children, className, style, showDecorations, variant, elevated, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
 type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
     /** Input visual variant */
-    variant?: "default" | "borderless";
+    variant?: "default" | "inline";
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Input visual variant */
-    variant?: "default" | "borderless";
+    variant?: "default" | "inline";
 } & React.RefAttributes<HTMLInputElement>>;
 
 type ModalProps = {

package/dist/index.js

@@ -132,6 +132,7 @@ function Card({
   style,
   showDecorations = false,
   variant = "default",
+  elevated = false,
   ...props
 }) {
   const isAppBackground = variant === "app-background";
@@ -143,7 +144,8 @@ function Card({
     // Safari support
     color: "var(--fg)",
     overflow: "hidden",
-    transition: "background-color 0.3s ease, color 0.3s ease",
+    transition: "background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease",
+    boxShadow: elevated ? "var(--shadow-elevated)" : void 0,
     ...style,
     // Apply position: relative by default, but allow user override via style prop
     position: style?.position || "relative"
@@ -241,22 +243,23 @@ function Card({
 }
 var Input = React2.forwardRef(
   ({ className, disabled, variant = "default", ...props }, ref) => {
-    const isBorderless = variant === "borderless";
+    const isInline = variant === "inline";
     return /* @__PURE__ */ jsx(
       "input",
       {
         ref,
         disabled,
         className: [
-          "w-full h-12 px-4 rounded-full bg-transparent outline-none transition-colors",
+          "w-full bg-transparent outline-none transition-colors",
+          isInline ? "" : "h-12 px-4 rounded-full",
           "text-sm placeholder:text-[var(--muted-fg)]",
-          !isBorderless && "border",
-          disabled ? "text-[#3F424F] cursor-not-allowed" + (isBorderless ? "" : " border-[#3F424F]") : [
+          !isInline && "border",
+          disabled ? "text-[#3F424F] cursor-not-allowed" + (isInline ? "" : " border-[#3F424F]") : [
             "text-[var(--muted-fg)]",
-            isBorderless ? "" : "border-[var(--muted-fg)]",
-            isBorderless ? "" : "hover:border-[var(--border)]",
+            isInline ? "" : "border-[var(--muted-fg)]",
+            isInline ? "" : "hover:border-[var(--border)]",
             "focus:text-[var(--fg)]",
-            isBorderless ? "" : "focus:border-[var(--color-brand)]"
+            isInline ? "" : "focus:border-[var(--color-brand)]"
           ].join(" "),
           className
         ].join(" "),

package/dist/styles.css

@@ -60,6 +60,7 @@
   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
+  --shadow-elevated: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 2px 2px 24px 0 rgba(0, 0, 0, 0.10);
   
   /* Motion */
   --motion-fast: 150ms;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "0.13.0",
+  "version": "1.0.0",
   "private": false,
   "description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
   "keywords": [

package/src/components/Card.tsx

@@ -10,6 +10,8 @@ export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
   showDecorations?: boolean;
   /** Card variant (default: "default") */
   variant?: "default" | "app-background";
+  /** Apply elevated shadow effect (default: false) */
+  elevated?: boolean;
 };
 
 export function Card({
@@ -18,6 +20,7 @@ export function Card({
   style,
   showDecorations = false,
   variant = "default",
+  elevated = false,
   ...props
 }: CardProps) {
   const isAppBackground = variant === "app-background";
@@ -32,7 +35,8 @@ export function Card({
     WebkitBackdropFilter: isAppBackground ? undefined : "blur(75px)", // Safari support
     color: "var(--fg)",
     overflow: "hidden",
-    transition: "background-color 0.3s ease, color 0.3s ease",
+    transition: "background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease",
+    boxShadow: elevated ? "var(--shadow-elevated)" : undefined,
     ...style,
     // Apply position: relative by default, but allow user override via style prop
     position: style?.position || "relative",

package/src/components/Input.tsx

@@ -2,29 +2,30 @@ import * as React from "react";
 
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
   /** Input visual variant */
-  variant?: "default" | "borderless";
+  variant?: "default" | "inline";
 };
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, disabled, variant = "default", ...props }, ref) => {
-    const isBorderless = variant === "borderless";
+    const isInline = variant === "inline";
     
     return (
       <input
         ref={ref}
         disabled={disabled}
         className={[
-          "w-full h-12 px-4 rounded-full bg-transparent outline-none transition-colors",
+          "w-full bg-transparent outline-none transition-colors",
+          isInline ? "" : "h-12 px-4 rounded-full",
           "text-sm placeholder:text-[var(--muted-fg)]",
-          !isBorderless && "border",
+          !isInline && "border",
           disabled
-            ? "text-[#3F424F] cursor-not-allowed" + (isBorderless ? "" : " border-[#3F424F]")
+            ? "text-[#3F424F] cursor-not-allowed" + (isInline ? "" : " border-[#3F424F]")
             : [
                 "text-[var(--muted-fg)]",
-                isBorderless ? "" : "border-[var(--muted-fg)]",
-                isBorderless ? "" : "hover:border-[var(--border)]",
+                isInline ? "" : "border-[var(--muted-fg)]",
+                isInline ? "" : "hover:border-[var(--border)]",
                 "focus:text-[var(--fg)]",
-                isBorderless ? "" : "focus:border-[var(--color-brand)]"
+                isInline ? "" : "focus:border-[var(--color-brand)]"
               ].join(" "),
           className
         ].join(" ")}

package/src/stories/Card.stories.tsx

@@ -82,6 +82,64 @@ export const AppBackgroundLarge: Story = {
   ),
 };
 
+export const Elevated: Story = {
+  render: () => (
+    <div className="max-w-md">
+      <Card elevated>
+        <Typo variant="headline-sm" bold="semibold">Elevated Card</Typo>
+        <Typo variant="body-md" className="mt-2">
+          This card uses the elevated shadow effect for a floating appearance.
+        </Typo>
+        <div className="mt-4">
+          <Button variant="primary">Take Action</Button>
+        </div>
+      </Card>
+    </div>
+  ),
+};
+
+export const ElevatedComparison: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-6 max-w-4xl">
+      <div>
+        <Typo variant="label-lg" bold="semibold" className="mb-3">Default</Typo>
+        <Card>
+          <Typo variant="title-md" bold="semibold">Regular Card</Typo>
+          <Typo variant="body-sm" className="mt-2">
+            Standard card with glassmorphic effect, no shadow.
+          </Typo>
+        </Card>
+      </div>
+      <div>
+        <Typo variant="label-lg" bold="semibold" className="mb-3">Elevated</Typo>
+        <Card elevated>
+          <Typo variant="title-md" bold="semibold">Elevated Card</Typo>
+          <Typo variant="body-sm" className="mt-2">
+            Enhanced with elevated shadow for emphasis.
+          </Typo>
+        </Card>
+      </div>
+    </div>
+  ),
+};
+
+export const ElevatedAppBackground: Story = {
+  render: () => (
+    <div className="max-w-md">
+      <Card variant="app-background" elevated className="p-8">
+        <Typo variant="headline-sm" bold="semibold">Elevated + App Background</Typo>
+        <Typo variant="body-md" className="mt-3">
+          Combining the app-background variant with elevated shadow creates a stunning effect.
+        </Typo>
+        <div className="mt-6 flex gap-3">
+          <Button variant="primary">Primary</Button>
+          <Button variant="secondary">Secondary</Button>
+        </div>
+      </Card>
+    </div>
+  ),
+};
+
 export const CustomPadding: Story = {
   render: () => (
     <div className="max-w-md space-y-4">

package/src/stories/Input.stories.tsx

@@ -37,13 +37,13 @@ export const Types: Story = {
   )
 };
 
-export const Borderless: Story = {
+export const Inline: Story = {
   render: () => (
     <div className="flex flex-col gap-4 w-96">
-      <Input variant="borderless" placeholder="Borderless input" type="text" />
-      <Input variant="borderless" placeholder="Borderless email" type="email" />
-      <Input variant="borderless" placeholder="Borderless search..." />
-      <Input variant="borderless" placeholder="Disabled borderless" disabled />
+      <Input variant="inline" placeholder="Inline input" type="text" />
+      <Input variant="inline" placeholder="Inline email" type="email" />
+      <Input variant="inline" placeholder="Inline search..." />
+      <Input variant="inline" placeholder="Disabled inline" disabled />
     </div>
   )
 };

package/src/styles/tokens.css

@@ -44,6 +44,7 @@
   /* Shadows */
   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
+  --shadow-elevated: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 2px 2px 24px 0 rgba(0, 0, 0, 0.10);
   
   /* Motion */
   --motion-fast: 150ms;