diff --git a/package.json b/package.json index bb1a306..b53f45d 100755 --- a/package.json +++ b/package.json @@ -1,13 +1,20 @@ { "name": "@jason/ui-kit", - "version": "0.1.0", - "description": "Shared design foundation — branded tokens, Tailwind preset, shadcn-style components, motion, app shell + marketing blocks. Guarded by Impeccable.", + "version": "0.2.0", + "description": "Shared design foundation \u2014 branded tokens, Tailwind preset, shadcn-style components, motion, app shell + marketing blocks. Guarded by Impeccable.", "type": "module", "license": "MIT", "author": "Jason ", - "repository": { "type": "git", "url": "https://git.alwisp.com/jason/ui-kit.git" }, - "publishConfig": { "registry": "https://git.alwisp.com/api/packages/jason/npm/" }, - "sideEffects": ["**/*.css"], + "repository": { + "type": "git", + "url": "https://git.alwisp.com/jason/ui-kit.git" + }, + "publishConfig": { + "registry": "https://git.alwisp.com/api/packages/jason/npm/" + }, + "sideEffects": [ + "**/*.css" + ], "files": [ "dist", "tailwind-preset.cjs", @@ -18,7 +25,10 @@ "README.md" ], "exports": { - ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" }, + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.js" + }, "./preset": "./tailwind-preset.cjs", "./styles.css": "./src/styles/globals.css" }, @@ -44,7 +54,11 @@ "sonner": "^1.7.1", "tailwind-merge": "^2.6.0" }, - "peerDependencies": { "react": ">=18", "react-dom": ">=18", "tailwindcss": ">=3.4" }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18", + "tailwindcss": ">=3.4" + }, "devDependencies": { "@types/react": "^18.3.18", "@types/react-dom": "^18.3.5", diff --git a/src/components/input.tsx b/src/components/input.tsx index 24d1b39..3a7b1d8 100755 --- a/src/components/input.tsx +++ b/src/components/input.tsx @@ -1,20 +1,25 @@ import * as React from "react"; +import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "../lib/cn"; -export const Input = React.forwardRef>( - ({ className, type, ...props }, ref) => ( - +const inputVariants = cva( + "flex w-full rounded border border-border bg-bg/40 text-text placeholder:text-muted " + + "transition-shadow duration-base ease-out focus-visible:outline-none focus-visible:ring-2 " + + "focus-visible:ring-ring/60 focus-visible:border-brand/60 disabled:cursor-not-allowed disabled:opacity-50", + { + variants: { size: { sm: "h-8 px-2.5 py-1 text-sm", md: "h-10 px-3 py-2 text-sm" } }, + defaultVariants: { size: "md" }, + } +); + +export interface InputProps + extends Omit, "size">, + VariantProps {} + +export const Input = React.forwardRef( + ({ className, size, type, ...props }, ref) => ( + ) ); Input.displayName = "Input"; +export { inputVariants }; diff --git a/src/components/label.tsx b/src/components/label.tsx new file mode 100755 index 0000000..3786559 --- /dev/null +++ b/src/components/label.tsx @@ -0,0 +1,9 @@ +import * as React from "react"; +import { cn } from "../lib/cn"; + +export const Label = React.forwardRef>( + ({ className, ...props }, ref) => ( +