@reinvented/design 0.1.0 → 0.2.0

package/docs/visual-polish.md

@@ -0,0 +1,141 @@
+# Visual Polish Guide
+
+Standards for animations, transitions, loading patterns, and interaction polish.
+
+## Transition Durations
+
+| Duration | Use |
+|----------|-----|
+| `duration-150` (150ms) | Hover states, color changes, opacity |
+| `duration-200` (200ms) | Modals open/close, tooltips, popovers |
+| `duration-300` (300ms) | Page transitions, slide-ins, expanded sections |
+
+**Easing**: Use `ease-out` for entrances, `ease-in` for exits, `ease-in-out` for state changes.
+
+## Modal Animations
+
+```vue
+<!-- Dialog with fade + scale -->
+<DialogContent class="
+  data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95
+  data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95
+  duration-200
+">
+```
+
+## List Item Animations
+
+```vue
+<TransitionGroup name="list" tag="div">
+  <Card v-for="item in items" :key="item.id">
+    <!-- content -->
+  </Card>
+</TransitionGroup>
+
+<style>
+.list-enter-active { transition: all 0.3s ease-out; }
+.list-leave-active { transition: all 0.2s ease-in; }
+.list-enter-from { opacity: 0; transform: translateY(8px); }
+.list-leave-to { opacity: 0; transform: translateX(-16px); }
+.list-move { transition: transform 0.3s ease; }
+</style>
+```
+
+## Button Loading State
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { Button } from '@reinvented/design'
+import { Loader2 } from 'lucide-vue-next'
+
+const saving = ref(false)
+async function handleSave() {
+  saving.value = true
+  try {
+    await saveMutation()
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <Button :disabled="saving" @click="handleSave">
+    <Loader2 v-if="saving" class="w-4 h-4 mr-2 animate-spin" />
+    {{ saving ? 'Saving...' : 'Save' }}
+  </Button>
+</template>
+```
+
+## Skeleton Loading
+
+Skeletons must match the shape of the actual content:
+
+```vue
+<!-- Skeleton for a card list -->
+<div class="space-y-4">
+  <div v-for="i in 3" :key="i" class="p-4 border rounded-lg">
+    <div class="flex items-center gap-3">
+      <Skeleton class="w-10 h-10 rounded-full" />
+      <div class="flex-1 space-y-2">
+        <Skeleton class="h-4 w-3/4" />
+        <Skeleton class="h-3 w-1/2" />
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Toast Notifications
+
+```vue
+<script setup>
+import { toast } from '@reinvented/design'
+
+// Success
+toast.success('Task created')
+
+// Error with action
+toast.error('Failed to save', {
+  action: { label: 'Retry', onClick: () => handleSave() }
+})
+
+// Promise-based (auto shows loading → success/error)
+toast.promise(saveMutation(), {
+  loading: 'Saving...',
+  success: 'Saved!',
+  error: 'Failed to save'
+})
+</script>
+```
+
+## Focus Management
+
+- **Modal open**: Focus first interactive element inside the modal
+- **Modal close**: Return focus to the trigger element
+- **After delete**: Focus the next item in the list (or empty state)
+- **After create**: Focus the newly created item (or close modal and show toast)
+- **Tab order**: Logical reading order, top-to-bottom, left-to-right
+
+## Hover Effects
+
+```vue
+<!-- Card with hover lift -->
+<Card class="transition-shadow duration-150 hover:shadow-md cursor-pointer">
+
+<!-- Button with subtle scale on press -->
+<Button class="active:scale-[0.98] transition-transform duration-150">
+```
+
+## Optimistic Updates
+
+Use for:
+- Toggles (like/unlike, pin/unpin)
+- Status changes (mark complete)
+- Reordering (drag and drop)
+
+Do NOT use for:
+- Creation (need server-generated ID)
+- Deletion (hard to undo if server rejects)
+- Complex mutations (multiple side effects)

package/package.json

@@ -1,74 +1,53 @@
 {
   "name": "@reinvented/design",
-  "version": "0.1.0",
-  "description": "Reinvented platform design system — premium UI components and tokens",
-  "license": "MIT",
-  "author": "Reinvented",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/reinvented/ri-flex"
-  },
+  "version": "0.2.0",
   "type": "module",
-  "publishConfig": {
-    "access": "public"
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles": "./src/styles/index.css",
+    "./tokens": "./src/styles/tokens.css",
+    "./src/styles/*": "./src/styles/*",
+    "./src/*": "./src/*",
+    "./tailwind.config.js": "./tailwind.config.js",
+    "./patterns/*": "./src/patterns/*"
   },
   "files": [
-    "dist",
-    "tailwind.config.ts",
-    "README.md"
+    "src/",
+    "docs/",
+    "tailwind.config.js",
+    "tsconfig.json",
+    "DESIGN_GUIDE.md"
   ],
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./css": "./dist/index.css",
-    "./tailwind": "./tailwind.config.ts"
+  "scripts": {
+    "build": "vue-tsc --noEmit",
+    "lint": "eslint src"
   },
   "peerDependencies": {
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
+    "vue": "^3.5.0"
   },
   "dependencies": {
-    "@radix-ui/react-avatar": "^1.1.2",
-    "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-dialog": "^1.1.4",
-    "@radix-ui/react-dropdown-menu": "^2.1.4",
-    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-popover": "^1.1.4",
-    "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.4",
-    "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-switch": "^1.1.2",
-    "@radix-ui/react-tabs": "^1.1.2",
-    "@radix-ui/react-toast": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.1.6",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.0.4",
-    "lucide-react": "^0.469.0",
-    "tailwind-merge": "^2.6.0"
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.6.0",
+    "lucide-vue-next": "^0.460.0",
+    "radix-vue": "^1.9.0",
+    "@vueuse/core": "^11.0.0",
+    "embla-carousel-vue": "^8.5.0",
+    "vaul-vue": "^0.2.0",
+    "vee-validate": "^4.14.0",
+    "@vee-validate/zod": "^4.14.0",
+    "zod": "^3.23.0",
+    "vue-sonner": "^1.2.0",
+    "v-calendar": "^3.1.0",
+    "@tanstack/vue-table": "^8.21.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.49",
-    "postcss-cli": "^11.0.1",
-    "postcss-import": "^16.1.1",
-    "tailwindcss": "^3.4.17",
-    "tsup": "^8.3.6",
-    "typescript": "^5.7.3",
-    "@reinvented/tsconfig": "0.0.0"
-  },
-  "scripts": {
-    "build": "tsup && postcss src/index.css -o dist/index.css",
-    "dev": "tsup --watch",
-    "lint": "eslint .",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist"
+    "vue": "^3.5.0",
+    "typescript": "^5.6.0",
+    "vue-tsc": "^2.1.0",
+    "tailwindcss": "^3.4.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0"
   }
-}
+}

package/src/components/ui/avatar/Avatar.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+interface Props { class?: HTMLAttributes['class']; src?: string; alt?: string; fallback?: string }
+const props = defineProps<Props>()
+</script>
+<template>
+  <span :class="cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', props.class)">
+    <img v-if="src" :src="src" :alt="alt" class="aspect-square h-full w-full object-cover" />
+    <span v-else class="flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-medium">
+      {{ fallback || '?' }}
+    </span>
+  </span>
+</template>

package/src/components/ui/avatar/index.ts

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar.vue'

package/src/components/ui/badge/Badge.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+        success: 'border-transparent bg-success text-success-foreground shadow',
+        warning: 'border-transparent bg-warning text-warning-foreground shadow',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  }
+)
+
+type BadgeVariants = VariantProps<typeof badgeVariants>
+interface Props { variant?: BadgeVariants['variant']; class?: HTMLAttributes['class'] }
+const props = withDefaults(defineProps<Props>(), { variant: 'default' })
+</script>
+<template><div :class="cn(badgeVariants({ variant }), props.class)"><slot /></div></template>

package/src/components/ui/badge/index.ts

@@ -0,0 +1 @@
+export { default as Badge } from './Badge.vue'

package/src/components/ui/button/Button.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        success: 'bg-success text-success-foreground shadow-sm hover:bg-success/90',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        xs: 'h-7 rounded px-2 text-xs',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        xl: 'h-12 rounded-lg px-10 text-base',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
+
+interface Props {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  as?: string
+  class?: HTMLAttributes['class']
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+  variant: 'default',
+  size: 'default',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <component
+    :is="as"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+    :disabled="disabled"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </component>
+</template>

package/src/components/ui/button/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button.vue'

package/src/components/ui/card/Card.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '../lib/utils'
+
+interface Props { class?: HTMLAttributes['class'] }
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('rounded-xl border bg-card text-card-foreground shadow', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/CardContent.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+interface Props { class?: HTMLAttributes['class'] }
+const props = defineProps<Props>()
+</script>
+<template><div :class="cn('p-6 pt-0', props.class)"><slot /></div></template>

package/src/components/ui/card/CardDescription.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+interface Props { class?: HTMLAttributes['class'] }
+const props = defineProps<Props>()
+</script>
+<template><p :class="cn('text-sm text-muted-foreground', props.class)"><slot /></p></template>

package/src/components/ui/card/CardFooter.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+interface Props { class?: HTMLAttributes['class'] }
+const props = defineProps<Props>()
+</script>
+<template><div :class="cn('flex items-center p-6 pt-0', props.class)"><slot /></div></template>

package/src/components/ui/card/CardHeader.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+interface Props { class?: HTMLAttributes['class'] }
+const props = defineProps<Props>()
+</script>
+<template>
+  <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)"><slot /></div>
+</template>

package/src/components/ui/card/CardTitle.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+interface Props { class?: HTMLAttributes['class'] }
+const props = defineProps<Props>()
+</script>
+<template><h3 :class="cn('font-semibold leading-none tracking-tight', props.class)"><slot /></h3></template>

package/src/components/ui/card/index.ts

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardFooter } from './CardFooter.vue'

package/src/components/ui/input/Input.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+interface Props {
+  class?: HTMLAttributes['class']
+  type?: string
+  placeholder?: string
+  modelValue?: string | number
+  disabled?: boolean
+}
+const props = withDefaults(defineProps<Props>(), { type: 'text' })
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+</script>
+<template>
+  <input
+    :type="type"
+    :value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+  />
+</template>

package/src/components/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'

package/src/components/ui/lib/utils.ts

@@ -0,0 +1,2 @@
+// Re-export from the canonical lib/utils location
+export { cn } from '../../../lib/utils'

package/src/components/ui/scroll-area/ScrollArea.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+interface Props { class?: HTMLAttributes['class']; orientation?: 'horizontal' | 'vertical' }
+const props = withDefaults(defineProps<Props>(), { orientation: 'vertical' })
+</script>
+<template>
+  <div :class="cn('relative overflow-hidden', props.class)" :style="{ overflow: 'auto' }">
+    <div class="h-full w-full rounded-[inherit]">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/ui/scroll-area/index.ts

@@ -0,0 +1 @@
+export { default as ScrollArea } from './ScrollArea.vue'

package/src/components/ui/separator/Separator.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+interface Props { class?: HTMLAttributes['class']; orientation?: 'horizontal' | 'vertical' }
+const props = withDefaults(defineProps<Props>(), { orientation: 'horizontal' })
+</script>
+<template>
+  <div
+    role="separator"
+    :class="cn(
+      'shrink-0 bg-border',
+      orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+      props.class
+    )"
+  />
+</template>

package/src/components/ui/separator/index.ts

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'

package/src/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+interface Props { class?: HTMLAttributes['class'] }
+const props = defineProps<Props>()
+</script>
+<template>
+  <div :class="cn('animate-pulse rounded-md bg-primary/10', props.class)" />
+</template>

package/src/components/ui/skeleton/index.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.vue'

package/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}