@oneplatformdev/ui 0.0.1-beta.99 → 0.1.0-8

package/src_old/global.css

@@ -0,0 +1,275 @@
+@import 'tailwindcss';
+
+@plugin 'tailwindcss-animate';
+
+@custom-variant dark (&:is([data-mode="dark"] *));
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1536px) {
+    max-width: 1536px;
+  }
+}
+
+@theme {
+  --breakpoint-sm: 480px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 976px;
+  --breakpoint-xl: 1440px;
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-additional-green: hsl(var(--additional-green));
+  --color-additional-blue: hsl(var(--additional-blue));
+  --color-additional-yellow: hsl(var(--additional-yellow));
+  --color-additional-salmon: hsl(var(--additional-salmon));
+
+  --color-typography: hsl(var(--text-primary));
+  --color-typography-highlight: hsl(var(--text-highlight));
+  --color-typography-primary: hsl(var(--text-primary));
+  --color-typography-secondary: hsl(var(--text-secondary));
+  --color-typography-error: hsl(var(--text-error));
+  --color-typography-success: hsl(var(--text-success));
+  --color-typography-muted: hsl(var(--text-muted));
+
+  --color-gray-1: hsl(var(--gray-1));
+  --color-gray-2: hsl(var(--gray-2));
+  --color-gray-3: hsl(var(--gray-3));
+  --color-gray-4: hsl(var(--gray-4));
+  --color-gray-5: hsl(var(--gray-5));
+  --color-gray: hsl(var(--gray-1));
+
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-greenner: hsl(var(--greenner));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  --color-sidebar: hsl(var(--sidebar-background));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@layer base {
+  :root {
+    /*--additional-green: 80 192 153;*/
+    /*--additional-blue: 93 170 238;*/
+    /*--additional-yellow: 255 197 101;*/
+    /*--additional-salmon: 249 131 124;*/
+
+    /*--text-highlight: var(--highlight); // 123 87 224;*/
+    /*--text-primary: 43 46 72;*/
+    /*--text-secondary: 125 125 125;*/
+    /*--text-error: 199 16 38;*/
+    /*--text-success: 11 138 0;*/
+    /*--text-muted: 39 39 42;*/
+
+    /*--gray-1: 220 220 221;*/
+    /*--gray-2: 241 243 244;*/
+    /*--gray-3: 220 227 235;*/
+    /*--gray-4: 51 78 104;*/
+    /*--gray-5: 87 103 118;*/
+
+    --additional-green: 166 58% 53%;
+    --additional-blue: 207 77% 65%;
+    --additional-yellow: 38 100% 70%;
+    --additional-salmon: 3 94% 73%;
+
+    --text-highlight: 258 79% 68%;
+    --text-primary: 231 25% 23%;
+    --text-secondary: 0 0% 49%;
+    --text-error: 350 92% 42%;
+    --text-success: 114 100% 27%;
+    --text-muted: 228 4% 16%;
+
+    --gray-1: 210 7% 87%;
+    --gray-2: 210 14% 95%;
+    --gray-3: 210 20% 89%;
+    --gray-4: 210 34% 30%;
+    --gray-5: 210 16% 40%;
+
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 99%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    /*--primary: 0 100% 50%;*/
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 228 8% 87%;
+    --ring: 240 5.9% 10%;
+
+    --radius: 0.5rem;
+
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+
+    --sidebar-background: 240 5.3% 3%;
+    --sidebar-foreground: 0 0% 98%;
+    --sidebar-primary: 220 6% 25%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 220 6% 25%;
+    --sidebar-accent-foreground: 0 0% 100%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 15% 59.8%;
+  }
+
+  .dark {
+    /*--additional-green: 71 167 133;*/
+    /*--additional-blue: 83 149 207;*/
+    /*--additional-yellow: 239 176 71;*/
+    /*--additional-salmon: 249 131 124;*/
+
+    /*--text-highlight: var(--highlight); // 123 87 224;*/
+    /*--text-primary: 227 227 227;*/
+    /*--text-secondary: 184 192 204;*/
+    /*--text-error: 245 59 48;*/
+    /*--text-success: 42 163 31;*/
+    /*--text-muted: 39 39 42;*/
+
+    /*--gray-1: 13 15 17;*/
+    /*--gray-2: 25 29 50;*/
+    /*--gray-3: 38 44 54;*/
+    /*--gray-4: 51 78 104;*/
+    /*--gray-5: 87 103 118;*/
+
+    --additional-green: 166 58% 47%;
+    --additional-blue: 207 60% 57%;
+    --additional-yellow: 38 85% 61%;
+    --additional-salmon: 3 94% 73%;
+
+    --text-highlight: 258 79% 68%;
+    --text-primary: 0 0% 89%;
+    --text-secondary: 210 10% 76%;
+    --text-error: 356 91% 59%;
+    --text-success: 123 63% 40%;
+    --text-muted: 228 4% 16%;
+
+    --gray-1: 210 12% 6%;
+    --gray-2: 225 32% 15%;
+    --gray-3: 210 18% 18%;
+    --gray-4: 210 34% 30%;
+    --gray-5: 210 16% 40%;
+
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+.rdp-vhidden {
+  @apply hidden;
+}
+

package/src_old/index.ts

@@ -0,0 +1,72 @@
+import "./global.css"
+
+export * from './Accordion';
+export * from './Alert';
+export * from './AlertDialog';
+export * from './AreaChart';
+export * from './Aside';
+export * from './AspectRatio';
+export * from './Avatar';
+export * from './Badge';
+export * from './Breadcrumb';
+export * from './Button';
+export * from './ButtonIcon';
+export * from './Calendar';
+export * from './Card';
+export * from './Carousel';
+export * from './Chart';
+export * from './Checkbox';
+export * from './Collapsible';
+export * from './Combobox';
+export * from './Command';
+export * from './DataTable';
+export * from './DatePicker';
+export * from './Dialog';
+export * from './Drawer';
+export * from './DropdownMenu';
+export * from './Form';
+export * from './FormCheckbox';
+export * from './FormCombobox';
+export * from './FormDatePicker';
+export * from './FormInput';
+export * from './FormSelect';
+export * from './FormTextarea';
+export * from './Header';
+export * from './HoverCard';
+export * from './Input';
+export * from './InputOTP';
+export * from './Label';
+export * from './LazyLoader';
+export * from './LoadedIcon';
+export * from './LoadingMask';
+export * from './LoadingProgress';
+export * from './Menubar';
+export * from './NavigationMenu';
+export * from './Pagination';
+export * from './Popover';
+export * from './Progress';
+export * from './RadioGroup';
+export * from './Resizable';
+export * from './ScrollArea';
+export * from './Search';
+export * from './Select';
+export * from './Separator';
+export * from './Sheet';
+export * from './Sidebar';
+export * from './Skeleton';
+export * from './Slider';
+export * from './Sonner';
+export * from './Switch';
+export * from './Table';
+export * from './Tabs';
+export * from './Textarea';
+export * from './Theme';
+export * from './Toast';
+export * from './Toaster';
+export * from './Toggle';
+export * from './ToggleGroup';
+export * from './Tooltip';
+export * from './Dropzone';
+export * from './FormDropzone';
+export * from './TablePagination';
+

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "../utils"
+    },
+    {
+      "path": "../hooks"
+    },
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,41 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "references": [
+    {
+      "path": "../utils/tsconfig.lib.json"
+    },
+    {
+      "path": "../hooks/tsconfig.lib.json"
+    }
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,67 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import tailwind from '@tailwindcss/vite'
+import { external } from "./external";
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { defineConfig } from 'vite';
+import { globSync } from 'glob';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/ui',
+  plugins: [
+    react(),
+    tailwind(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin([ '*.md', 'LICENSE', 'package.json' ]),
+    dts({
+      include: 'src',
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json')
+    }) ],
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      name: '@oneplatformdev/ui',
+      formats: [ 'es' as const ],
+      cssFileName: 'global',
+      entry: {
+        index: path.resolve(__dirname, 'src/index.ts'),
+        ...Object.fromEntries(
+          globSync('src/**/*.{ts,tsx}').map((filename) => {
+            return [
+              path.relative(
+                'src',
+                filename.slice(0, filename.length - path.extname(filename).length)
+              ),
+              path.resolve(__dirname, filename),
+            ]
+          })
+        )
+      }
+    },
+    rollupOptions: {
+      external,
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+        globals: {
+          path: 'path',
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          tailwindcss: 'tailwindcss',
+        }
+      }
+    },
+  },
+}));

package/Accordion/Accordion.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
-    showChevron?: boolean;
-} & React.RefAttributes<HTMLButtonElement>>;
-declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/Accordion/Accordion.mjs

@@ -1,49 +0,0 @@
-import { jsx as a, jsxs as d } from "react/jsx-runtime";
-import * as s from "react";
-import * as e from "@radix-ui/react-accordion";
-import { ChevronDown as l } from "lucide-react";
-import { cn as c } from "@oneplatformdev/utils";
-const w = e.Root, f = s.forwardRef(({ className: t, ...o }, r) => /* @__PURE__ */ a(
-  e.Item,
-  {
-    ref: r,
-    className: c("border-b", t),
-    ...o
-  }
-));
-f.displayName = "AccordionItem";
-const p = s.forwardRef(({ className: t, children: o, showChevron: r = !0, ...i }, m) => /* @__PURE__ */ a(e.Header, { className: "flex", children: /* @__PURE__ */ d(
-  e.Trigger,
-  {
-    ref: m,
-    className: c(
-      "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all text-left [&[data-state=open]>svg]:rotate-180",
-      t
-    ),
-    onKeyDown: (n) => {
-      n.key === " " && n.target === n.currentTarget && n.preventDefault();
-    },
-    ...i,
-    children: [
-      o,
-      r && /* @__PURE__ */ a(l, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" })
-    ]
-  }
-) }));
-p.displayName = e.Trigger.displayName;
-const N = s.forwardRef(({ className: t, children: o, ...r }, i) => /* @__PURE__ */ a(
-  e.Content,
-  {
-    ref: i,
-    className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-    ...r,
-    children: /* @__PURE__ */ a("div", { className: c("pb-4 pt-0", t), children: o })
-  }
-));
-N.displayName = e.Content.displayName;
-export {
-  w as Accordion,
-  N as AccordionContent,
-  f as AccordionItem,
-  p as AccordionTrigger
-};

package/Accordion/index.mjs

@@ -1,7 +0,0 @@
-import { Accordion as r, AccordionContent as n, AccordionItem as i, AccordionTrigger as d } from "./Accordion.mjs";
-export {
-  r as Accordion,
-  n as AccordionContent,
-  i as AccordionItem,
-  d as AccordionTrigger
-};

package/Accordion/package.json

@@ -1,7 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.mjs",
-  "module": "./index.mjs",
-  "default": "./index.mjs",
-  "types": "./index.d.ts"
-}

package/Alert/Alert.d.ts

@@ -1,7 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-import * as React from "react";
-export declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | null | undefined;
-} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
-export declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
-export declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/Alert/Alert.mjs

@@ -1,37 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as i from "react";
-import { cn as l } from "@oneplatformdev/utils";
-import { alertVariants as m } from "./alertVariants.mjs";
-const s = i.forwardRef(({ className: e, variant: r, ...t }, o) => /* @__PURE__ */ a(
-  "div",
-  {
-    ref: o,
-    role: "alert",
-    className: l(m({ variant: r }), e),
-    ...t
-  }
-));
-s.displayName = "Alert";
-const n = i.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ a(
-  "h5",
-  {
-    ref: t,
-    className: l("mb-1 font-medium leading-none tracking-tight", e),
-    ...r
-  }
-));
-n.displayName = "AlertTitle";
-const d = i.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ a(
-  "div",
-  {
-    ref: t,
-    className: l("text-sm [&_p]:leading-relaxed", e),
-    ...r
-  }
-));
-d.displayName = "AlertDescription";
-export {
-  s as Alert,
-  d as AlertDescription,
-  n as AlertTitle
-};

package/Alert/alertVariants.d.ts

@@ -1,4 +0,0 @@
-export declare const alertVariants: (props?: ({
-    variant?: "default" | "destructive" | null | undefined;
-} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
-export default alertVariants;

package/Alert/alertVariants.mjs

@@ -1,19 +0,0 @@
-import { cva as t } from "class-variance-authority";
-const r = t(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-export {
-  r as alertVariants,
-  r as default
-};

package/Alert/index.mjs

@@ -1,6 +0,0 @@
-import { Alert as t, AlertDescription as l, AlertTitle as i } from "./Alert.mjs";
-export {
-  t as Alert,
-  l as AlertDescription,
-  i as AlertTitle
-};

package/Alert/package.json

@@ -1,7 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.mjs",
-  "module": "./index.mjs",
-  "default": "./index.mjs",
-  "types": "./index.d.ts"
-}