@indinno/digicode-ui 0.1.0 → 0.1.1

package/README.md

@@ -1,167 +1,63 @@
-# DigiCode
+# DigiCode UI
 
-A source-owned React UI primitive library with a shadcn-style CLI. It contains **UI elements only** — no pages, marketing sections, headers, footers, dashboards, or application-specific content.
+React components extracted from the DigiCode Solutions website, with TypeScript declarations and a standalone CSS stylesheet. Package name: `@indinno/digicode-ui`. Version 0.1.1 is prepared locally and has not been published by this project.
 
-The visual language is based on the clean DigiCode UI: dark ink actions, blue accents, soft surfaces, 12–18px radii, restrained borders, and accessible focus states.
+## Development
 
-## Components
-
-- Accordion
-- Alert
-- Avatar
-- Badge
-- Breadcrumb
-- Button
-- Card
-- Checkbox
-- Dialog
-- Drawer
-- Dropdown Menu
-- Empty State
-- Input
-- Pagination
-- Progress
-- Radio Group
-- Select
-- Separator
-- Skeleton
-- Spinner
-- Stat Card
-- Switch
-- Table
-- Tabs
-- Textarea
-- Tooltip
-
-## Publish to npm
-
-1. Change the package name in `package.json` if needed. The starter uses:
-
-```json
-"name": "@indinno/digicode-ui"
-```
-
-2. Login and publish:
-
-```bash
-npm login
-npm publish --access public
+```sh
+npm ci
+npm run preview -- --port 4173
+npm run typecheck
+npm run build
+npm run pack:check
 ```
 
-## Use it like shadcn
+Open http://127.0.0.1:4173 to explore buttons, form controls, cards, illustrations, and corner options. Build output is generated in `dist/`.
 
-Initialize the target React/Next.js project:
+## Usage
 
-```bash
-npx @indinno/digicode-ui init
-```
-
-Add only the components you need:
-
-```bash
-npx @indinno/digicode-ui add button input card badge
-```
-
-Or install the full primitive set:
-
-```bash
-npx @indinno/digicode-ui add all
-```
-
-List available components:
-
-```bash
-npx @indinno/digicode-ui list
-```
-
-The CLI copies source into either:
-
-```text
-src/components/ui
-src/lib/cn.ts
-src/styles/digicode.css
-```
-
-or, for projects without a `src` directory:
-
-```text
-components/ui
-lib/cn.ts
-styles/digicode.css
-```
-
-That means the consuming project **owns the source code**, just like the shadcn model. You can edit a copied button or card locally without waiting for a library release.
-
-## Import the stylesheet once
-
-For a Next.js app using `src/app`, add this to the root layout or global stylesheet entry:
+After installing the package in a React application, import the stylesheet once:
 
 ```tsx
-import "../styles/digicode.css";
-```
+import { Button, Field, Select } from "@indinno/digicode-ui";
+import "@indinno/digicode-ui/styles.css";
 
-Then use copied components normally:
-
-```tsx
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-
-export function Example() {
+export function ProjectForm() {
   return (
-    <Card elevated>
-      <CardHeader>
-        <CardTitle>Client details</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Input label="Client name" placeholder="Enter client name" />
-        <Button>Save client</Button>
-      </CardContent>
-    </Card>
+    <form>
+      <Field label="Project type">
+        <Select name="projectType" corners="subtle" defaultValue="automation">
+          <option value="automation">Automation</option>
+          <option value="website">Website</option>
+          <option value="dashboard">Dashboard</option>
+        </Select>
+      </Field>
+      <Button label="Start a project" corners="square" arrow />
+    </form>
   );
 }
 ```
 
-## Dark theme
+React, React DOM, and lucide-react are peer dependencies. See `package.json` for supported ranges. The library uses ES modules.
 
-Set `data-digicode-theme="dark"` on any parent to switch the token set:
-
-```tsx
-<div data-digicode-theme="dark">
-  <Button>Dark theme button</Button>
-</div>
-```
+## Components
 
-## Customize the design system
+- `Button`, `ButtonLink`: dark, light, and text variants; rolling labels and optional animated arrows.
+- `Input`, `Textarea`, `Select`, `Field`: native form controls with labels and optional hints.
+- `Brand`, `SectionHeading`: branding and section headings.
+- `ServiceCard`, `ServiceVisual`: automation, store, logistics, analytics, and AI illustrations.
+- `ProductCard`, `ProductPreview`: tasks, inventory, and school previews.
 
-Change the CSS variables at the top of `styles/digicode.css`:
+Buttons, links, inputs, textareas, and selects accept `corners="square" | "subtle" | "rounded" | "pill"`. The default is `subtle` (4px). Dropdown panels use matching corner styles; pill textareas use a practical 24px radius.
 
-```css
-:root {
-  --digicode-primary: #2474ad;
-  --digicode-ink: #1c2f41;
-  --digicode-radius: 12px;
-  --digicode-radius-lg: 18px;
-}
-```
+The enhanced select menu uses CSS `appearance: base-select` where supported. Other browsers retain their native picker. Native selection, keyboard navigation, and form behavior are preserved. Select animations respect reduced-motion preferences.
 
-Because the files are copied into the project, you can also modify each component directly.
+Style tokens such as `--dc-ink`, `--dc-heading`, `--dc-muted`, and `--dc-blue` can be overridden in application CSS. Components inherit the application's font.
 
-## Package philosophy
+## Publishing
 
-This package intentionally excludes:
+Configure the npm trusted publisher with owner `misindinno`, repository `digicode-ui`, workflow filename `publish.yml`, no environment, and Allow npm publish enabled.
 
-- complete pages
-- hero sections
-- website navigation
-- footer sections
-- DigiCode-specific copy/data
-- API/enquiry logic
-- app-specific dashboards
+To publish, update the version in package.json and package-lock.json, commit and push, then publish a GitHub release with a matching tag (for example, `v0.1.1`). The Publish to npm workflow checks the version, builds the package, and publishes it automatically. Draft releases, prereleases, and ordinary pushes do not publish. Each npm release needs a previously unused version.
 
-Only reusable UI primitives belong here.
+You can also manually run Publish to npm from GitHub Actions on `main`. The workflow only publishes from `misindinno/digicode-ui`; the rinkupuri copy remains separate. No release is created by adding this workflow.

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Brand, Button, ButtonLink, Field, Input, ProductCard, ProductPreview, SectionHeading, Select, ServiceCard, ServiceVisual, Textarea, type ButtonProps, type CornerStyle, type CornerProps, type FieldProps, type ProductCardProps, type ProductPreviewKind, type ServiceCardProps, type ServiceVisualKind, } from "./ui.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/library/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,MAAM,EACN,UAAU,EACV,KAAK,EACL,KAAK,EACL,WAAW,EACX,cAAc,EACd,cAAc,EACd,MAAM,EACN,WAAW,EACX,aAAa,EACb,QAAQ,EACR,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,GACvB,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { Brand, Button, ButtonLink, Field, Input, ProductCard, ProductPreview, SectionHeading, Select, ServiceCard, ServiceVisual, Textarea, } from "./ui.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/library/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,MAAM,EACN,UAAU,EACV,KAAK,EACL,KAAK,EACL,WAAW,EACX,cAAc,EACd,cAAc,EACd,MAAM,EACN,WAAW,EACX,aAAa,EACb,QAAQ,GAST,MAAM,SAAS,CAAC"}