@inkeep/cxkit-styled 0.0.0-dev-20250221234142

package/dist/ui/recipes/markdown.d.ts

@@ -0,0 +1,16 @@
+import { ClassProp } from 'class-variance-authority/types';
+export declare const heading: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & ClassProp) | undefined) => string;
+export declare const list: (props?: ({
+    style?: "ordered" | "unordered" | null | undefined;
+} & ClassProp) | undefined) => string;
+export declare const table: (props?: ({
+    slot?: "root" | "th" | "td" | null | undefined;
+    size?: "md" | null | undefined;
+} & ClassProp) | undefined) => string;
+export declare const sup: (props?: ClassProp | undefined) => string;
+export declare const code: (props?: ClassProp | undefined) => string;
+export declare const codeblock: (props?: ({
+    slot?: "container" | "header" | "copyButton" | "highlighter" | null | undefined;
+} & ClassProp) | undefined) => string;

package/dist/ui/recipes/markdown.js

@@ -0,0 +1,101 @@
+"use client";
+import { cva as e } from "class-variance-authority";
+const t = e("uppercase font-semibold tracking-[1px] text-gray-600", {
+  variants: {
+    size: {
+      md: "text-xl leading-[1.2]",
+      sm: "text-md leading-[1.2]"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), a = e("text-2sm ms-[1em] break-words pb-3 pl-7 relative [&_li]:mb-1", {
+  variants: {
+    style: {
+      ordered: "list-decimal [counter-increment:item]",
+      unordered: "list-[initial]"
+    }
+  }
+}), o = e("", {
+  variants: {
+    slot: {
+      root: "w-full border-collapse [font-variant-numeric:lining-nums_tabular-nums]",
+      th: [
+        "font-heading font-bold uppercase tracking-wider text-start",
+        "data-[is-numeric=true]:text-end",
+        "border-b border-gray-100 dark:border-gray-700",
+        "text-gray-600 dark:text-gray-400",
+        // Sizing
+        "px-6 py-3 leading-4 text-xs"
+      ],
+      td: [
+        "text-start data-[is-numeric=true]:text-end",
+        "border-b border-gray-100 dark:border-gray-700",
+        // Sizing
+        "px-6 py-4 leading-5"
+      ]
+    },
+    size: {
+      md: ""
+    }
+  }
+}), i = e([
+  "ml-[3px] cursor-pointer",
+  "[&_a]:bg-inkeep-primary-light",
+  "[&_a]:px-1",
+  "[&_a]:py-[1px]",
+  "[&_a]:rounded-sm",
+  "[&_a]:no-underline",
+  "[&_a]:text-inkeep-primary-text-subtle",
+  "[&_a]:hover:text-inkeep-primary-text-bold",
+  "[&_a]:font-semibold",
+  "[&_a]:dark:bg-inkeep-primary-text-subtle",
+  "[&_a]:dark:hover:text-inkeep-expanded-primary-200",
+  "[&_a]:hover:no-underline"
+]), n = e([
+  "bg-inkeep-primary-medium text-inkeep-primary-text-color-on-primary",
+  "[overflow-wrap:anywhere] min-w-0 py-[.2rem] my-[.1rem]",
+  "px-[.4rem] rounded-[6px] [font-size:85%!important]",
+  "font-semibold inline-block",
+  "font-mono "
+]), d = e("", {
+  variants: {
+    slot: {
+      container: "overflow-y-auto mb-3",
+      header: [
+        "flex items-center justify-between",
+        "bg-gray-50 dark:bg-gray-dark-800",
+        "text-gray-600 dark:text-gray-400",
+        "mb-0 leading-[1.25] px-2 text-xs",
+        "transition-all duration-200 ease-in-out",
+        "rounded-[6px_6px_0_0]"
+      ],
+      copyButton: [
+        "px-0 bg-inherit text-inherit",
+        "hover:text-gray-800 dark:text-white-alpha-700 dark:hover:text-white-alpha-950",
+        "dark:hover:bg-transparent h-8 w-8 min-h-8 min-w-8 text-sm",
+        "data-[copied]:text-inkeep-primary-medium"
+      ],
+      highlighter: [
+        "text-1sm overflow-x-auto",
+        "rounded-[0_0_6px_6px]",
+        "p-[1em] whitespace-pre",
+        "m-[0px_0px_0.5em]",
+        "bg-gray-50 dark:bg-gray-dark-900",
+        "[scrollbar-width:thin]",
+        "[--scrollbar-color:var(--color-gray-300)]",
+        "dark:[--scrollbar-color:var(--color-gray-dark-600)]",
+        "[scrollbar-color:var(--scrollbar-color)_transparent]"
+      ]
+    }
+  }
+});
+export {
+  n as code,
+  d as codeblock,
+  t as heading,
+  a as list,
+  i as sup,
+  o as table
+};

package/dist/ui/recipes/modal.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("class-variance-authority"),t=require("./button.cjs"),a=e.cva("",{variants:{slot:{overlay:["fixed inset-0 bg-black-alpha-600","data-[state=closed]:hidden","data-[state=open]:animate-fade-in","backdrop-blur-sm overflow-y-auto","place-items-center grid z-overlay"],content:["fixed","top-[5%]","left-1/2","translate-x-[-50%]","z-overlay","flex flex-col","w-full","duration-200","text-inherit rounded-md","bg-white shadow-lg dark:bg-gray-dark-950","focus-visible:outline-none","focus:outline-none","data-[state=closed]:hidden","data-[state=closed]:animate-fade-out","data-[state=open]:animate-fade-in","data-[mobile]:inset-0","data-[mobile]:h-[unset]","data-[mobile]:w-[unset]","data-[mobile]:transform-none","data-[mobile]:rounded-none","[&[data-mobile]>div]:h-full","[&[data-mobile]>div]:max-h-dvh","[&[data-mobile]>div]:max-h-[unset]"],header:["px-6 py-4 text-xl font-semibold flex-0 flex flex-col"],close:[t.button({variant:"ghost",size:"md"}),"w-8 h-8 min-w-0","text-lg text-gray-500 dark:text-white-alpha-500","absolute top-2 right-3"],body:["px-6 py-2 flex-1"]}}});exports.modal=a;

package/dist/ui/recipes/modal.d.cts

@@ -0,0 +1,4 @@
+import { ClassProp } from 'class-variance-authority/types';
+export declare const modal: (props?: ({
+    slot?: "header" | "overlay" | "content" | "close" | "body" | null | undefined;
+} & ClassProp) | undefined) => string;

package/dist/ui/recipes/modal.d.ts

@@ -0,0 +1,4 @@
+import { ClassProp } from 'class-variance-authority/types';
+export declare const modal: (props?: ({
+    slot?: "header" | "overlay" | "content" | "close" | "body" | null | undefined;
+} & ClassProp) | undefined) => string;

package/dist/ui/recipes/modal.js

@@ -0,0 +1,58 @@
+"use client";
+import { cva as e } from "class-variance-authority";
+import { button as t } from "./button.js";
+const d = e("", {
+  variants: {
+    slot: {
+      overlay: [
+        "fixed inset-0 bg-black-alpha-600",
+        "data-[state=closed]:hidden",
+        "data-[state=open]:animate-fade-in",
+        "backdrop-blur-sm overflow-y-auto",
+        "place-items-center grid z-overlay"
+      ],
+      content: [
+        "fixed",
+        "top-[5%]",
+        "left-1/2",
+        "translate-x-[-50%]",
+        // 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
+        "z-overlay",
+        "flex flex-col",
+        "w-full",
+        // 'w-full max-w-lg',
+        "duration-200",
+        "text-inherit rounded-md",
+        // 'px-6 py-2',
+        "bg-white shadow-lg dark:bg-gray-dark-950",
+        "focus-visible:outline-none",
+        "focus:outline-none",
+        "data-[state=closed]:hidden",
+        "data-[state=closed]:animate-fade-out",
+        "data-[state=open]:animate-fade-in",
+        //
+        "data-[mobile]:inset-0",
+        "data-[mobile]:h-[unset]",
+        "data-[mobile]:w-[unset]",
+        "data-[mobile]:transform-none",
+        "data-[mobile]:rounded-none",
+        //
+        "[&[data-mobile]>div]:h-full",
+        "[&[data-mobile]>div]:max-h-dvh",
+        "[&[data-mobile]>div]:max-h-[unset]"
+        //
+      ],
+      header: ["px-6 py-4 text-xl font-semibold flex-0 flex flex-col"],
+      close: [
+        t({ variant: "ghost", size: "md" }),
+        "w-8 h-8 min-w-0",
+        "text-lg text-gray-500 dark:text-white-alpha-500",
+        "absolute top-2 right-3"
+      ],
+      body: ["px-6 py-2 flex-1"]
+    }
+  }
+});
+export {
+  d as modal
+};

package/dist/ui/recipes/popover.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("class-variance-authority"),a=e.cva("",{variants:{slot:{content:["flex flex-col bg-white dark:bg-gray-dark-800","rounded-md z-popover","shadow-md relative","data-[state=open]:animate-fade-in","data-[state=closed]:animate-fade-out"],arrow:"fill-white dark:fill-gray-dark-800"}}});exports.popover=a;

package/dist/ui/recipes/popover.d.cts

@@ -0,0 +1,4 @@
+import { ClassProp } from 'class-variance-authority/types';
+export declare const popover: (props?: ({
+    slot?: "content" | "arrow" | null | undefined;
+} & ClassProp) | undefined) => string;

package/dist/ui/recipes/popover.d.ts

@@ -0,0 +1,4 @@
+import { ClassProp } from 'class-variance-authority/types';
+export declare const popover: (props?: ({
+    slot?: "content" | "arrow" | null | undefined;
+} & ClassProp) | undefined) => string;

package/dist/ui/recipes/popover.js

@@ -0,0 +1,19 @@
+"use client";
+import { cva as a } from "class-variance-authority";
+const t = a("", {
+  variants: {
+    slot: {
+      content: [
+        "flex flex-col bg-white dark:bg-gray-dark-800",
+        "rounded-md z-popover",
+        "shadow-md relative",
+        "data-[state=open]:animate-fade-in",
+        "data-[state=closed]:animate-fade-out"
+      ],
+      arrow: "fill-white dark:fill-gray-dark-800"
+    }
+  }
+});
+export {
+  t as popover
+};

package/dist/ui/recipes/scrollable.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("class-variance-authority"),l=e.cva("",{variants:{section:{wrapper:"w-full flex flex-col grow-[5] overflow-hidden justify-between max-h-full",header:"relative max-h-full",content:"w-full flex flex-col overflow-hidden p-0 grow-[2]",footer:"justify-self-end flex-shrink-0"}}});exports.scrollable=l;

package/dist/ui/recipes/scrollable.d.cts

@@ -0,0 +1,4 @@
+import { ClassProp } from 'class-variance-authority/types';
+export declare const scrollable: (props?: ({
+    section?: "header" | "content" | "wrapper" | "footer" | null | undefined;
+} & ClassProp) | undefined) => string;

package/dist/ui/recipes/scrollable.d.ts

@@ -0,0 +1,4 @@
+import { ClassProp } from 'class-variance-authority/types';
+export declare const scrollable: (props?: ({
+    section?: "header" | "content" | "wrapper" | "footer" | null | undefined;
+} & ClassProp) | undefined) => string;

package/dist/ui/recipes/scrollable.js

@@ -0,0 +1,15 @@
+"use client";
+import { cva as e } from "class-variance-authority";
+const o = e("", {
+  variants: {
+    section: {
+      wrapper: "w-full flex flex-col grow-[5] overflow-hidden justify-between max-h-full",
+      header: "relative max-h-full",
+      content: "w-full flex flex-col overflow-hidden p-0 grow-[2]",
+      footer: "justify-self-end flex-shrink-0"
+    }
+  }
+});
+export {
+  o as scrollable
+};

package/dist/ui/recipes/select.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("class-variance-authority"),t=require("./input.cjs"),a=e.cva("",{variants:{slot:{trigger:[t.input({size:"md",variant:"outline"}),"px-4 py-0 flex items-center justify-between"],content:["relative z-dropdown max-h-96 min-w-[8rem]","overflow-hidden rounded-md border","bg-white dark:bg-gray-dark-950 shadow-md","data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out","data-[side=bottom]:translate-y-1.5","data-[side=left]:-translate-x-1.5","data-[side=right]:translate-x-1.5","data-[side=top]:-translate-y-1.5"],viewport:["p-1 h-[var(--radix-select-trigger-height)]","w-full min-w-[var(--radix-select-trigger-width)]"],item:["hover:bg-gray-100 dark:hover:bg-gray-dark-800","focus:bg-gray-100 dark:focus:bg-gray-dark-800","relative flex w-full text-md cursor-pointer py-1.5","select-none outline-none pl-2 pr-8 rounded-md items-center ","data-[disabled]:pointer-events-none data-[disabled]:opacity-50"],itemIndicator:["absolute right-2 flex h-3.5 w-3.5","items-center justify-center"]}}});exports.select=a;

package/dist/ui/recipes/select.d.cts

@@ -0,0 +1,4 @@
+import { ClassProp } from 'class-variance-authority/types';
+export declare const select: (props?: ({
+    slot?: "content" | "trigger" | "viewport" | "item" | "itemIndicator" | null | undefined;
+} & ClassProp) | undefined) => string;

package/dist/ui/recipes/select.d.ts

@@ -0,0 +1,4 @@
+import { ClassProp } from 'class-variance-authority/types';
+export declare const select: (props?: ({
+    slot?: "content" | "trigger" | "viewport" | "item" | "itemIndicator" | null | undefined;
+} & ClassProp) | undefined) => string;

package/dist/ui/recipes/select.js

@@ -0,0 +1,38 @@
+"use client";
+import { cva as e } from "class-variance-authority";
+import { input as t } from "./input.js";
+const i = e("", {
+  variants: {
+    slot: {
+      trigger: [
+        t({ size: "md", variant: "outline" }),
+        "px-4 py-0 flex items-center justify-between"
+      ],
+      content: [
+        "relative z-dropdown max-h-96 min-w-[8rem]",
+        "overflow-hidden rounded-md border",
+        "bg-white dark:bg-gray-dark-950 shadow-md",
+        "data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
+        "data-[side=bottom]:translate-y-1.5",
+        "data-[side=left]:-translate-x-1.5",
+        "data-[side=right]:translate-x-1.5",
+        "data-[side=top]:-translate-y-1.5"
+      ],
+      viewport: [
+        "p-1 h-[var(--radix-select-trigger-height)]",
+        "w-full min-w-[var(--radix-select-trigger-width)]"
+      ],
+      item: [
+        "hover:bg-gray-100 dark:hover:bg-gray-dark-800",
+        "focus:bg-gray-100 dark:focus:bg-gray-dark-800",
+        "relative flex w-full text-md cursor-pointer py-1.5",
+        "select-none outline-none pl-2 pr-8 rounded-md items-center ",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+      ],
+      itemIndicator: ["absolute right-2 flex h-3.5 w-3.5", "items-center justify-center"]
+    }
+  }
+});
+export {
+  i as select
+};

package/dist/ui/recipes/skeleton.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("class-variance-authority"),o=e.cva(["h-5 opacity-70 rounded-sm shadow-none","bg-clip-padding cursor-default pointer-events-none","before:invisible after:invisible *:invisible","animate-skeleton-bg-fade select-none","[--start-color:theme(colors.gray.50)]","[--end-color:theme(colors.gray.300)]","dark:[--start-color:theme(colors.gray-dark.800)]","dark:[--end-color:theme(colors.gray-dark.600)]","bg-[--start-color] border-[--end-color]"]);exports.skeleton=o;

package/dist/ui/recipes/skeleton.d.cts

@@ -0,0 +1,2 @@
+import { ClassProp } from 'class-variance-authority/types';
+export declare const skeleton: (props?: ClassProp | undefined) => string;

package/dist/ui/recipes/skeleton.d.ts

@@ -0,0 +1,2 @@
+import { ClassProp } from 'class-variance-authority/types';
+export declare const skeleton: (props?: ClassProp | undefined) => string;

package/dist/ui/recipes/skeleton.js

@@ -0,0 +1,16 @@
+"use client";
+import { cva as e } from "class-variance-authority";
+const r = e([
+  "h-5 opacity-70 rounded-sm shadow-none",
+  "bg-clip-padding cursor-default pointer-events-none",
+  "before:invisible after:invisible *:invisible",
+  "animate-skeleton-bg-fade select-none",
+  "[--start-color:theme(colors.gray.50)]",
+  "[--end-color:theme(colors.gray.300)]",
+  "dark:[--start-color:theme(colors.gray-dark.800)]",
+  "dark:[--end-color:theme(colors.gray-dark.600)]",
+  "bg-[--start-color] border-[--end-color]"
+]);
+export {
+  r as skeleton
+};

package/dist/ui/recipes/widget-toggle.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("class-variance-authority"),a=require("./button.cjs"),e=t.cva("",{variants:{slot:{root:["bg-gray-50 dark:bg-transparent","border border-transparent dark:border-gray-dark-700","rounded-md p-0.5 flex items-center"],button:["group",a.button({size:"xs"}),"rounded-md data-[active]:shadow-sm","bg-transparent data-[active]:bg-white","text-gray-600 data-[active]:text-gray-800","dark:text-white-alpha-600 dark:data-[active]:text-white-alpha-950","dark:data-[active]:bg-gray-dark-700 dark:shadow-none","hover:text-gray-800 hover:dark:text-white-alpha-950","focus-visible:ring-transparent"],icon:["mr-1 text-gray-500 data-[active]:text-gray-600","dark:text-white-alpha-500 dark:data-[active]:text-white-alpha-600","group-hover:text-gray-600 dark:group-hover:text-white-alpha-600"]}}});exports.widgetToggle=e;

package/dist/ui/recipes/widget-toggle.d.cts

@@ -0,0 +1,4 @@
+import { ClassProp } from 'class-variance-authority/types';
+export declare const widgetToggle: (props?: ({
+    slot?: "root" | "icon" | "button" | null | undefined;
+} & ClassProp) | undefined) => string;

package/dist/ui/recipes/widget-toggle.d.ts

@@ -0,0 +1,4 @@
+import { ClassProp } from 'class-variance-authority/types';
+export declare const widgetToggle: (props?: ({
+    slot?: "root" | "icon" | "button" | null | undefined;
+} & ClassProp) | undefined) => string;

package/dist/ui/recipes/widget-toggle.js

@@ -0,0 +1,33 @@
+"use client";
+import { cva as t } from "class-variance-authority";
+import { button as a } from "./button.js";
+const d = t("", {
+  variants: {
+    slot: {
+      root: [
+        "bg-gray-50 dark:bg-transparent",
+        "border border-transparent dark:border-gray-dark-700",
+        "rounded-md p-0.5 flex items-center"
+      ],
+      button: [
+        "group",
+        a({ size: "xs" }),
+        "rounded-md data-[active]:shadow-sm",
+        "bg-transparent data-[active]:bg-white",
+        "text-gray-600 data-[active]:text-gray-800",
+        "dark:text-white-alpha-600 dark:data-[active]:text-white-alpha-950",
+        "dark:data-[active]:bg-gray-dark-700 dark:shadow-none",
+        "hover:text-gray-800 hover:dark:text-white-alpha-950",
+        "focus-visible:ring-transparent"
+      ],
+      icon: [
+        "mr-1 text-gray-500 data-[active]:text-gray-600",
+        "dark:text-white-alpha-500 dark:data-[active]:text-white-alpha-600",
+        "group-hover:text-gray-600 dark:group-hover:text-white-alpha-600"
+      ]
+    }
+  }
+});
+export {
+  d as widgetToggle
+};

package/dist/utils.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("clsx"),r=require("tailwind-merge");function n(...t){return r.twMerge(e.clsx(t))}const c=t=>t?"":void 0;exports.cn=n;exports.dataAttr=c;

package/dist/utils.d.cts

@@ -0,0 +1,4 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+export type Booleanish = boolean | 'true' | 'false';
+export declare const dataAttr: (guard: boolean | undefined) => Booleanish;

package/dist/utils.d.ts

@@ -0,0 +1,4 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+export type Booleanish = boolean | 'true' | 'false';
+export declare const dataAttr: (guard: boolean | undefined) => Booleanish;

package/dist/utils.js

@@ -0,0 +1,11 @@
+"use client";
+import { clsx as r } from "clsx";
+import { twMerge as o } from "tailwind-merge";
+function c(...t) {
+  return o(r(t));
+}
+const i = (t) => t ? "" : void 0;
+export {
+  c as cn,
+  i as dataAttr
+};

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@inkeep/cxkit-styled",
+  "version": "0.0.0-dev-20250221234142",
+  "description": "",
+  "license": "Inkeep, Inc. Customer License (IICL) v1.1",
+  "homepage": "",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/inkeep/widget",
+    "directory": "packages/styled"
+  },
+  "type": "module",
+  "main": "dist/index.cjs",
+  "files": [
+    "dist"
+  ],
+  "clean-package": "../../clean-package.config.json",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "merge-anything": "6.0.2",
+    "tailwind-merge": "2.6.0",
+    "@inkeep/cxkit-primitives": "0.0.0-dev-20250221234142"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@types/react": "19.0.7",
+    "@types/react-dom": "19.0.3",
+    "@vitejs/plugin-react": "4.3.4",
+    "autoprefixer": "10.4.20",
+    "clean-package": "2.2.0",
+    "cssnano": "7.0.6",
+    "globby": "14.0.2",
+    "postcss": "8.5.1",
+    "postcss-cli": "11.0.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "tailwindcss": "3.4.17",
+    "typescript": "5.7.3",
+    "vite": "5.4.11",
+    "vite-plugin-dts": "4.4.0",
+    "@inkeep/cxkit-theme": "0.0.0-dev-20250221234142",
+    "@inkeep/cxkit-types": "0.0.0-dev-20250221234142"
+  },
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "css:gen": "postcss ./src/index.css -o ./src/inkeep.css",
+    "build": "pnpm css:gen && vite build",
+    "watch": "vite build --watch",
+    "lint": "biome lint ./src",
+    "typecheck": "tsc"
+  }
+}