@inshorts/glint-ui 0.5.4 → 0.6.0

package/package.json

@@ -1,27 +1,402 @@
 {
   "name": "@inshorts/glint-ui",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "Glint Tailwind 4 UI kit for Inshorts Next panels.",
   "license": "UNLICENSED",
   "type": "module",
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "./theme.css"
   ],
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
     "./theme.css": "./theme.css",
-    "./utils": "./src/utils.ts",
-    "./clipboard": "./src/clipboard.ts",
-    "./dialogLayer": "./src/dialogLayer.ts",
-    "./date-range-picker": "./src/date-range-picker/index.tsx",
-    "./date-range-picker/dateRange": "./src/date-range-picker/dateRange.ts",
-    "./*": "./src/*.tsx",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./alert": {
+      "import": {
+        "types": "./dist/alert.d.ts",
+        "default": "./dist/alert.js"
+      },
+      "require": {
+        "types": "./dist/alert.d.cts",
+        "default": "./dist/alert.cjs"
+      }
+    },
+    "./autocomplete": {
+      "import": {
+        "types": "./dist/autocomplete.d.ts",
+        "default": "./dist/autocomplete.js"
+      },
+      "require": {
+        "types": "./dist/autocomplete.d.cts",
+        "default": "./dist/autocomplete.cjs"
+      }
+    },
+    "./badge": {
+      "import": {
+        "types": "./dist/badge.d.ts",
+        "default": "./dist/badge.js"
+      },
+      "require": {
+        "types": "./dist/badge.d.cts",
+        "default": "./dist/badge.cjs"
+      }
+    },
+    "./breadcrumb": {
+      "import": {
+        "types": "./dist/breadcrumb.d.ts",
+        "default": "./dist/breadcrumb.js"
+      },
+      "require": {
+        "types": "./dist/breadcrumb.d.cts",
+        "default": "./dist/breadcrumb.cjs"
+      }
+    },
+    "./button": {
+      "import": {
+        "types": "./dist/button.d.ts",
+        "default": "./dist/button.js"
+      },
+      "require": {
+        "types": "./dist/button.d.cts",
+        "default": "./dist/button.cjs"
+      }
+    },
+    "./card": {
+      "import": {
+        "types": "./dist/card.d.ts",
+        "default": "./dist/card.js"
+      },
+      "require": {
+        "types": "./dist/card.d.cts",
+        "default": "./dist/card.cjs"
+      }
+    },
+    "./checkbox": {
+      "import": {
+        "types": "./dist/checkbox.d.ts",
+        "default": "./dist/checkbox.js"
+      },
+      "require": {
+        "types": "./dist/checkbox.d.cts",
+        "default": "./dist/checkbox.cjs"
+      }
+    },
+    "./clipboard": {
+      "import": {
+        "types": "./dist/clipboard.d.ts",
+        "default": "./dist/clipboard.js"
+      },
+      "require": {
+        "types": "./dist/clipboard.d.cts",
+        "default": "./dist/clipboard.cjs"
+      }
+    },
+    "./collapsible": {
+      "import": {
+        "types": "./dist/collapsible.d.ts",
+        "default": "./dist/collapsible.js"
+      },
+      "require": {
+        "types": "./dist/collapsible.d.cts",
+        "default": "./dist/collapsible.cjs"
+      }
+    },
+    "./confirm-dialog": {
+      "import": {
+        "types": "./dist/confirm-dialog.d.ts",
+        "default": "./dist/confirm-dialog.js"
+      },
+      "require": {
+        "types": "./dist/confirm-dialog.d.cts",
+        "default": "./dist/confirm-dialog.cjs"
+      }
+    },
+    "./copy-button": {
+      "import": {
+        "types": "./dist/copy-button.d.ts",
+        "default": "./dist/copy-button.js"
+      },
+      "require": {
+        "types": "./dist/copy-button.d.cts",
+        "default": "./dist/copy-button.cjs"
+      }
+    },
+    "./data-table": {
+      "import": {
+        "types": "./dist/data-table.d.ts",
+        "default": "./dist/data-table.js"
+      },
+      "require": {
+        "types": "./dist/data-table.d.cts",
+        "default": "./dist/data-table.cjs"
+      }
+    },
+    "./date-range-picker": {
+      "import": {
+        "types": "./dist/date-range-picker/index.d.ts",
+        "default": "./dist/date-range-picker/index.js"
+      },
+      "require": {
+        "types": "./dist/date-range-picker/index.d.cts",
+        "default": "./dist/date-range-picker/index.cjs"
+      }
+    },
+    "./date-range-picker/dateRange": {
+      "import": {
+        "types": "./dist/date-range-picker/dateRange.d.ts",
+        "default": "./dist/date-range-picker/dateRange.js"
+      },
+      "require": {
+        "types": "./dist/date-range-picker/dateRange.d.cts",
+        "default": "./dist/date-range-picker/dateRange.cjs"
+      }
+    },
+    "./dialogLayer": {
+      "import": {
+        "types": "./dist/dialogLayer.d.ts",
+        "default": "./dist/dialogLayer.js"
+      },
+      "require": {
+        "types": "./dist/dialogLayer.d.cts",
+        "default": "./dist/dialogLayer.cjs"
+      }
+    },
+    "./feature-access-gate": {
+      "import": {
+        "types": "./dist/feature-access-gate.d.ts",
+        "default": "./dist/feature-access-gate.js"
+      },
+      "require": {
+        "types": "./dist/feature-access-gate.d.cts",
+        "default": "./dist/feature-access-gate.cjs"
+      }
+    },
+    "./field": {
+      "import": {
+        "types": "./dist/field.d.ts",
+        "default": "./dist/field.js"
+      },
+      "require": {
+        "types": "./dist/field.d.cts",
+        "default": "./dist/field.cjs"
+      }
+    },
+    "./image-uploader": {
+      "import": {
+        "types": "./dist/image-uploader.d.ts",
+        "default": "./dist/image-uploader.js"
+      },
+      "require": {
+        "types": "./dist/image-uploader.d.cts",
+        "default": "./dist/image-uploader.cjs"
+      }
+    },
+    "./input": {
+      "import": {
+        "types": "./dist/input.d.ts",
+        "default": "./dist/input.js"
+      },
+      "require": {
+        "types": "./dist/input.d.cts",
+        "default": "./dist/input.cjs"
+      }
+    },
+    "./label": {
+      "import": {
+        "types": "./dist/label.d.ts",
+        "default": "./dist/label.js"
+      },
+      "require": {
+        "types": "./dist/label.d.cts",
+        "default": "./dist/label.cjs"
+      }
+    },
+    "./modal": {
+      "import": {
+        "types": "./dist/modal.d.ts",
+        "default": "./dist/modal.js"
+      },
+      "require": {
+        "types": "./dist/modal.d.cts",
+        "default": "./dist/modal.cjs"
+      }
+    },
+    "./page-header": {
+      "import": {
+        "types": "./dist/page-header.d.ts",
+        "default": "./dist/page-header.js"
+      },
+      "require": {
+        "types": "./dist/page-header.d.cts",
+        "default": "./dist/page-header.cjs"
+      }
+    },
+    "./pagination": {
+      "import": {
+        "types": "./dist/pagination.d.ts",
+        "default": "./dist/pagination.js"
+      },
+      "require": {
+        "types": "./dist/pagination.d.cts",
+        "default": "./dist/pagination.cjs"
+      }
+    },
+    "./panel-brand-mark": {
+      "import": {
+        "types": "./dist/panel-brand-mark.d.ts",
+        "default": "./dist/panel-brand-mark.js"
+      },
+      "require": {
+        "types": "./dist/panel-brand-mark.d.cts",
+        "default": "./dist/panel-brand-mark.cjs"
+      }
+    },
+    "./panel-sign-in": {
+      "import": {
+        "types": "./dist/panel-sign-in.d.ts",
+        "default": "./dist/panel-sign-in.js"
+      },
+      "require": {
+        "types": "./dist/panel-sign-in.d.cts",
+        "default": "./dist/panel-sign-in.cjs"
+      }
+    },
+    "./segmented-control": {
+      "import": {
+        "types": "./dist/segmented-control.d.ts",
+        "default": "./dist/segmented-control.js"
+      },
+      "require": {
+        "types": "./dist/segmented-control.d.cts",
+        "default": "./dist/segmented-control.cjs"
+      }
+    },
+    "./select": {
+      "import": {
+        "types": "./dist/select.d.ts",
+        "default": "./dist/select.js"
+      },
+      "require": {
+        "types": "./dist/select.d.cts",
+        "default": "./dist/select.cjs"
+      }
+    },
+    "./separator": {
+      "import": {
+        "types": "./dist/separator.d.ts",
+        "default": "./dist/separator.js"
+      },
+      "require": {
+        "types": "./dist/separator.d.cts",
+        "default": "./dist/separator.cjs"
+      }
+    },
+    "./side-drawer": {
+      "import": {
+        "types": "./dist/side-drawer.d.ts",
+        "default": "./dist/side-drawer.js"
+      },
+      "require": {
+        "types": "./dist/side-drawer.d.cts",
+        "default": "./dist/side-drawer.cjs"
+      }
+    },
+    "./spinner": {
+      "import": {
+        "types": "./dist/spinner.d.ts",
+        "default": "./dist/spinner.js"
+      },
+      "require": {
+        "types": "./dist/spinner.d.cts",
+        "default": "./dist/spinner.cjs"
+      }
+    },
+    "./spreadsheet-grid": {
+      "import": {
+        "types": "./dist/spreadsheet-grid.d.ts",
+        "default": "./dist/spreadsheet-grid.js"
+      },
+      "require": {
+        "types": "./dist/spreadsheet-grid.d.cts",
+        "default": "./dist/spreadsheet-grid.cjs"
+      }
+    },
+    "./state-panel": {
+      "import": {
+        "types": "./dist/state-panel.d.ts",
+        "default": "./dist/state-panel.js"
+      },
+      "require": {
+        "types": "./dist/state-panel.d.cts",
+        "default": "./dist/state-panel.cjs"
+      }
+    },
+    "./switch": {
+      "import": {
+        "types": "./dist/switch.d.ts",
+        "default": "./dist/switch.js"
+      },
+      "require": {
+        "types": "./dist/switch.d.cts",
+        "default": "./dist/switch.cjs"
+      }
+    },
+    "./table": {
+      "import": {
+        "types": "./dist/table.d.ts",
+        "default": "./dist/table.js"
+      },
+      "require": {
+        "types": "./dist/table.d.cts",
+        "default": "./dist/table.cjs"
+      }
+    },
+    "./tabs": {
+      "import": {
+        "types": "./dist/tabs.d.ts",
+        "default": "./dist/tabs.js"
+      },
+      "require": {
+        "types": "./dist/tabs.d.cts",
+        "default": "./dist/tabs.cjs"
+      }
+    },
+    "./textarea": {
+      "import": {
+        "types": "./dist/textarea.d.ts",
+        "default": "./dist/textarea.js"
+      },
+      "require": {
+        "types": "./dist/textarea.d.cts",
+        "default": "./dist/textarea.cjs"
+      }
+    },
+    "./utils": {
+      "import": {
+        "types": "./dist/utils.d.ts",
+        "default": "./dist/utils.js"
+      },
+      "require": {
+        "types": "./dist/utils.d.cts",
+        "default": "./dist/utils.cjs"
+      }
+    }
   },
   "files": [
-    "src",
+    "dist",
     "theme.css",
     "README.md"
   ],
@@ -62,6 +437,7 @@
     "lucide-react": "^1.49.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
+    "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vite": "5.4.21",
     "vitest": "^2.1.9",
@@ -71,6 +447,7 @@
     "access": "public"
   },
   "scripts": {
+    "build": "tsup && node scripts/write-exports.mjs",
     "typecheck": "tsc --noEmit",
     "test": "vitest run"
   }

package/src/alert.tsx

@@ -1,74 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "./utils";
-
-/**
- * The inline message banner — a failed load, a warning above a form, a note.
- *
- * This was the most duplicated markup in the panel: thirty blocks across
- * twenty-eight files, spelled seven different ways. `px-3 py-2` in most places
- * and `px-4 py-3` in others, `text-rose-700` here and `text-destructive`
- * there — all meaning "something went wrong".
- *
- * `role` is derived from the variant rather than left to callers. An error a
- * user needs to act on should interrupt a screen reader; a note should not.
- * Almost none of the hand-rolled copies set either.
- */
-const alertVariants = cva("rounded-lg border px-3 py-2 text-sm", {
-  variants: {
-    variant: {
-      danger: "border-destructive/30 bg-destructive/5 text-destructive",
-      warning: "border-warning/30 bg-warning/5 text-warning",
-      success: "border-success/30 bg-success/5 text-success",
-      info: "border-info/30 bg-info/5 text-info",
-      /**
-       * The quiet state of a banner that also has loud ones — "no default
-       * campaign set" next to "this is the default". Without it those callers
-       * keep a ternary of raw class strings and the shared component only
-       * covers half of what they draw.
-       */
-      neutral: "border-border bg-muted/40 text-muted-foreground",
-    },
-  },
-  defaultVariants: {
-    // Failure is what a banner almost always reports here, and defaulting to
-    // it means the noisy case cannot be forgotten.
-    variant: "danger",
-  },
-});
-
-export interface AlertProps
-  extends
-    React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof alertVariants> {
-  /**
-   * A control belonging to the message, such as Retry. Given one, the banner
-   * lays out as a row and keeps the action at its end.
-   */
-  action?: React.ReactNode;
-}
-
-export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
-  ({ className, variant, action, children, ...props }, ref) => (
-    <div
-      ref={ref}
-      role={variant === "danger" || variant == null ? "alert" : "status"}
-      className={cn(
-        alertVariants({ variant }),
-        action && "flex flex-wrap items-center justify-between gap-3",
-        className,
-      )}
-      {...props}
-    >
-      {/* Wrapped so the action sits opposite the text rather than being
-          pushed around by whatever the caller passed as children. */}
-      {action ? <span>{children}</span> : children}
-      {action}
-    </div>
-  ),
-);
-
-Alert.displayName = "Alert";
-
-export { alertVariants };