@inshorts/glint-ui 0.3.0

package/README.md

@@ -0,0 +1,60 @@
+# @inshorts/glint-ui
+
+Shared Tailwind 4 UI kit for Inshorts Next panels — the same components that
+ship in `inpix-panel` (`src/lib/ui/`), extracted so every panel can reuse them.
+
+Includes Button, Input, Label, Card, Table, Modal, Select, DataTable,
+DateRangePicker, Tabs, ImageUploader (upload handlers injected), and the panel
+theme tokens.
+
+## Install
+
+Until this is published to the private registry, link the local checkout that
+sits next to your panel repos:
+
+```bash
+# from inshorts-sales-panel-next (or inpix-panel, users-crm, …)
+pnpm add @inshorts/glint-ui@file:../inshorts-npm-modules/glint/ui
+```
+
+After publish:
+
+```bash
+pnpm add @inshorts/glint-ui
+```
+
+Peer deps: `react` and `react-dom` ^19.3.
+
+## Wire it into a Next + Tailwind 4 panel
+
+1. Depend on the package (see above).
+2. Add `transpilePackages: ["@inshorts/glint-ui"]` in `next.config.mjs`.
+3. In `src/styles/globals.css`:
+
+```css
+@import "tailwindcss";
+@plugin "tailwindcss-animate";
+@import "@inshorts/glint-ui/theme.css";
+
+/* So Tailwind emits classes used only inside the package. */
+@source "../../node_modules/@inshorts/glint-ui/src";
+```
+
+4. Import components:
+
+```tsx
+import { Button, Modal, cn } from "@inshorts/glint-ui";
+// or a single file:
+import { Button } from "@inshorts/glint-ui/button";
+```
+
+`ImageUploader` takes `uploadFile` / `uploadFromUrl` props — each panel passes
+its own BFF upload route. Absolute `https://` pastes work without a handler.
+
+## Develop
+
+```bash
+cd glint/ui
+npm install
+npm run typecheck
+```

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@inshorts/glint-ui",
+  "version": "0.3.0",
+  "description": "Glint Tailwind 4 UI kit for Inshorts Next panels.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./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"
+  },
+  "files": [
+    "src",
+    "theme.css",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NewsInShorts/inshorts-npm-modules.git",
+    "directory": "glint/ui"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.3.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.49.0",
+    "tailwind-merge": "^3.7.0",
+    "@inshorts/glint-theme": "0.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/alert.tsx

@@ -0,0 +1,74 @@
+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-rose-200 bg-rose-50 text-rose-700",
+      warning: "border-amber-200 bg-amber-50 text-amber-800",
+      success: "border-emerald-200 bg-emerald-50 text-emerald-800",
+      info: "border-sky-200 bg-sky-50 text-sky-800",
+      /**
+       * 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 };