@tapizlabs/ui 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+All notable changes to `@tapizlabs/ui` should be documented in this file.
+
+The format is based on Keep a Changelog and the package follows Semantic Versioning for published releases.
+
+## [Unreleased]
+
+### Added
+- npm-ready README with package setup, exports, examples, and publishing guidance
+- shared support for landing icon exports such as `Star`, `AppleIcon`, and `GooglePlayIcon`
+
+### Changed
+- shared `Button` accepts icon component references in addition to rendered nodes
+- shared `ConfirmDialog` supports both `description` and compatibility `message` props
+- consumer apps are now migrated to shared theme, fonts, and shared UI primitives

package/FRAMEWORK_BOUNDARY.md

@@ -0,0 +1,47 @@
+# Tapiz UI Framework Boundary
+
+This document defines what belongs in `@tapizlabs/ui` and what should remain inside consuming applications.
+
+## Belongs In `@tapizlabs/ui`
+
+The package is the shared UI framework layer for Tapiz frontends. It should contain:
+
+- design tokens and global theme contract from `theme.css`
+- shared font loading
+- shared iconography
+- reusable React primitives
+- generic feedback, modal, table, and form building blocks
+- generic page building blocks such as `PageHeader`, `Pagination`, `SearchInput`, `StatusBadge`, and `ActionMenu`
+- generic skeleton primitives and reusable loading patterns
+
+Add something to the package when it is:
+
+- reused across multiple Tapiz apps
+- visually part of the shared Tapiz language
+- not tightly coupled to one app's routes, translations, queries, or storage rules
+
+## Stays App-Specific
+
+The following should remain in consumer apps unless they are intentionally generalized:
+
+- app layout shells like `UILayout`, sidebars, drawers, tenant shells, and role-based navigation
+- domain selectors like `SubjectSelector`
+- app-specific translation adapters such as wrappers that inject local `i18n` labels
+- SEO and document metadata helpers like `SEOHead`
+- language/session/settings flows tied to app state or local storage
+- page-specific skeleton compositions that represent one screen instead of a reusable primitive
+- domain widgets and chart assemblies that depend on product-specific data contracts
+
+## Current Intentional App Adapters
+
+As of this migration, a few local adapters remain by design in `tapiz-reactjs-ui`:
+
+- `SearchInput` wrapper for localized placeholder and clear label
+- `Pagination` wrapper for localized labels
+- `StatusBadge` wrapper for attendance/admin status mapping
+
+These wrappers are acceptable because they adapt shared framework primitives to app-level language and domain semantics without forking the visual system.
+
+## Rule Of Thumb
+
+If removing product data, routing, and translation concerns still leaves a useful component, it probably belongs in `@tapizlabs/ui`.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tapiz UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,333 @@
+# @tapizlabs/ui
+
+Shared Tapiz design system package for React applications.
+
+Repository: `https://github.com/owlCoder/tapiz-design-system`
+
+`@tapizlabs/ui` centralizes the visual foundation used across Tapiz frontends:
+
+- shared theme tokens and utility classes
+- shared font loading
+- shared icon exports
+- shared React UI primitives
+
+It is intended to keep multiple apps visually aligned while reducing duplicated UI code.
+
+## Installation
+
+```bash
+npm install @tapizlabs/ui
+```
+
+## Requirements
+
+- `react >= 19`
+- `react-dom >= 19`
+- `tailwindcss >= 4`
+
+These are declared as peer dependencies and must be provided by the consuming app.
+
+## Package Exports
+
+This package exposes:
+
+- `@tapizlabs/ui`
+  React components, icons, and exported TypeScript types
+- `@tapizlabs/ui/theme.css`
+  Shared theme tokens, utility classes, button styles, surfaces, and animation helpers
+- `@tapizlabs/ui/fonts`
+  Shared IBM Plex font loading entrypoint
+
+## Quick Start
+
+Import fonts once in your application entry:
+
+```ts
+import "@tapizlabs/ui/fonts";
+```
+
+Import the shared theme before your app-specific styles:
+
+```css
+@import "@tapizlabs/ui/theme.css";
+@source "../node_modules/@tapizlabs/ui/dist/**/*.js";
+```
+
+Then consume components directly from the package:
+
+```tsx
+import { Button, EmptyState, InfoBanner } from "@tapizlabs/ui";
+
+export function ExamplePanel() {
+  return (
+    <div className="space-y-4">
+      <InfoBanner
+        title="Shared UI"
+        description="This screen is using the shared Tapiz design system package."
+      />
+      <Button>Save changes</Button>
+      <EmptyState
+        title="No records"
+        description="Create your first item to get started."
+      />
+    </div>
+  );
+}
+```
+
+## Tailwind Setup
+
+`@tapizlabs/ui` components contain Tailwind class strings inside the published JavaScript bundle. Consumer apps must include the package in Tailwind's source scan:
+
+```css
+@source "../node_modules/@tapizlabs/ui/dist/**/*.js";
+```
+
+Without that line, some shared component classes may be omitted from the final CSS build.
+
+## Included Components
+
+Current exports include:
+
+- `Button`
+- `Input`
+- `Select`
+- `Textarea`
+- `FieldLabel`
+- `FieldHint`
+- `Checkbox`
+- `RadioButton`
+- `Spinner`
+- `PageSpinner`
+- `Toast`
+- `ToastProvider`
+- `useToast`
+- `FormError`
+- `ErrorBoundary`
+- `BaseModal`
+- `ConfirmDialog`
+- `Tooltip`
+- `Badge`
+- `Card`
+- `CardHeader`
+- `CardBody`
+- `EmptyState`
+- `ErrorState`
+- `InfoBanner`
+- `PageHeader`
+- `SearchInput`
+- `Pagination`
+- `SectionTitle`
+- `StatusBadge`
+- `ActionMenu`
+- `Skeleton`
+- `SkeletonCard`
+- `SkeletonKpiCard`
+- `SkeletonBanner`
+- `SkeletonPageHeader`
+- `SkeletonTable`
+- `DataTable`
+
+## Component Examples
+
+### Button
+
+```tsx
+import { Button, Plus } from "@tapizlabs/ui";
+
+export function Actions() {
+  return (
+    <div className="flex gap-3">
+      <Button>Default</Button>
+      <Button variant="secondary" icon={Plus}>
+        Create
+      </Button>
+      <Button variant="danger" loading>
+        Deleting
+      </Button>
+    </div>
+  );
+}
+```
+
+### ConfirmDialog
+
+```tsx
+import { ConfirmDialog, Trash } from "@tapizlabs/ui";
+
+export function DeleteDialogExample() {
+  return (
+    <ConfirmDialog
+      open
+      danger
+      title="Delete record"
+      description="This action cannot be undone."
+      icon={<Trash size={14} />}
+      confirmLabel="Delete"
+      cancelLabel="Cancel"
+      onConfirm={() => {}}
+      onCancel={() => {}}
+    />
+  );
+}
+```
+
+Compatibility note:
+
+- `ConfirmDialog` supports both `description` and legacy `message`
+
+### Form Primitives
+
+```tsx
+import { FieldHint, FieldLabel, Input, Select, Textarea } from "@tapizlabs/ui";
+
+export function ProfileFields() {
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <FieldLabel htmlFor="name">Display name</FieldLabel>
+        <Input id="name" placeholder="Jane Doe" />
+        <FieldHint>Visible to other Tapiz users.</FieldHint>
+      </div>
+
+      <div className="space-y-2">
+        <FieldLabel htmlFor="role">Role</FieldLabel>
+        <Select id="role" defaultValue="assistant">
+          <option value="assistant">Assistant</option>
+          <option value="student">Student</option>
+        </Select>
+      </div>
+
+      <div className="space-y-2">
+        <FieldLabel htmlFor="bio">Bio</FieldLabel>
+        <Textarea id="bio" rows={4} placeholder="Short description" />
+      </div>
+    </div>
+  );
+}
+```
+
+### EmptyState
+
+```tsx
+import { EmptyState, Info } from "@tapizlabs/ui";
+
+export function NoResults() {
+  return (
+    <EmptyState
+      title="No results"
+      description="Try adjusting your filters."
+      icon={<Info size={18} />}
+    />
+  );
+}
+```
+
+### ToastProvider
+
+```tsx
+import { ToastProvider, useToast } from "@tapizlabs/ui";
+
+function SaveButton() {
+  const { showToast } = useToast();
+
+  return (
+    <button
+      type="button"
+      onClick={() => showToast({ message: "Saved successfully.", ok: true })}
+    >
+      Save
+    </button>
+  );
+}
+
+export function App() {
+  return (
+    <>
+      <SaveButton />
+      <ToastProvider />
+    </>
+  );
+}
+```
+
+### DataTable
+
+```tsx
+import { DataTable, type Column } from "@tapizlabs/ui";
+
+interface User {
+  id: string;
+  name: string;
+  role: string;
+}
+
+const columns: Column<User>[] = [
+  { id: "name", header: "Name", cell: (row) => row.name, sortable: true, sortAccessor: (row) => row.name },
+  { id: "role", header: "Role", cell: (row) => row.role },
+];
+
+export function UsersTable({ rows }: { rows: User[] }) {
+  return (
+    <DataTable
+      data={rows}
+      columns={columns}
+      rowKey={(row) => row.id}
+      emptyState="No users"
+    />
+  );
+}
+```
+
+## Included Icon Sets
+
+The root package export also includes shared icons used across Tapiz apps, including navigation, status, auth, action, feedback, form, layout, and logo icons.
+
+Example:
+
+```tsx
+import { Button, Plus, LogoMark } from "@tapizlabs/ui";
+
+export function Toolbar() {
+  return (
+    <div className="flex items-center gap-3">
+      <LogoMark />
+      <Button icon={Plus}>Create</Button>
+    </div>
+  );
+}
+```
+
+`Button` accepts either a rendered React node or an icon component reference through the `icon` and `iconRight` props.
+
+Additional branded/storefront icons such as `AppleIcon`, `GooglePlayIcon`, and `Star` are also exported when needed by marketing surfaces.
+
+## Styling Contract
+
+This package is intentionally opinionated. It provides the shared Tapiz visual language, including:
+
+- theme color variables
+- font variables
+- reusable button classes
+- surface and border tokens
+- shared motion helpers
+
+Consumer apps can add local styles on top, but should treat `theme.css` as the base design contract for consistency.
+
+## Framework Boundary
+
+`@tapizlabs/ui` is the shared framework layer for reusable Tapiz UI primitives. Layout shells, SEO helpers, language/session flows, and domain-bound selectors should usually stay in consuming apps.
+
+See [FRAMEWORK_BOUNDARY.md](./FRAMEWORK_BOUNDARY.md) for the exact package-vs-app contract used in this workspace.
+
+## Accessibility Notes
+
+- modal components render through portals
+- table components expose sortable state through appropriate semantics
+- button and feedback primitives preserve native HTML behavior where possible
+
+## License
+
+This package is released under the `MIT` license.
+
+Attribution is retained as `Tapiz UI` in the package metadata and license file.

package/dist/fonts.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/fonts.js

@@ -0,0 +1,18 @@
+// src/fonts.ts
+import "@fontsource/ibm-plex-sans/latin-400.css";
+import "@fontsource/ibm-plex-sans/latin-400-italic.css";
+import "@fontsource/ibm-plex-sans/latin-500.css";
+import "@fontsource/ibm-plex-sans/latin-600.css";
+import "@fontsource/ibm-plex-sans/latin-700.css";
+import "@fontsource/ibm-plex-sans/cyrillic-400.css";
+import "@fontsource/ibm-plex-sans/cyrillic-500.css";
+import "@fontsource/ibm-plex-sans/cyrillic-600.css";
+import "@fontsource/ibm-plex-sans/cyrillic-700.css";
+import "@fontsource/ibm-plex-mono/latin-400.css";
+import "@fontsource/ibm-plex-mono/latin-400-italic.css";
+import "@fontsource/ibm-plex-mono/latin-500.css";
+import "@fontsource/ibm-plex-mono/latin-600.css";
+import "@fontsource/ibm-plex-mono/latin-ext-400.css";
+import "@fontsource/ibm-plex-mono/latin-ext-500.css";
+import "@fontsource/ibm-plex-mono/latin-ext-600.css";
+//# sourceMappingURL=fonts.js.map

package/dist/fonts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/fonts.ts"],"sourcesContent":["import \"@fontsource/ibm-plex-sans/latin-400.css\";\nimport \"@fontsource/ibm-plex-sans/latin-400-italic.css\";\nimport \"@fontsource/ibm-plex-sans/latin-500.css\";\nimport \"@fontsource/ibm-plex-sans/latin-600.css\";\nimport \"@fontsource/ibm-plex-sans/latin-700.css\";\nimport \"@fontsource/ibm-plex-sans/cyrillic-400.css\";\nimport \"@fontsource/ibm-plex-sans/cyrillic-500.css\";\nimport \"@fontsource/ibm-plex-sans/cyrillic-600.css\";\nimport \"@fontsource/ibm-plex-sans/cyrillic-700.css\";\nimport \"@fontsource/ibm-plex-mono/latin-400.css\";\nimport \"@fontsource/ibm-plex-mono/latin-400-italic.css\";\nimport \"@fontsource/ibm-plex-mono/latin-500.css\";\nimport \"@fontsource/ibm-plex-mono/latin-600.css\";\nimport \"@fontsource/ibm-plex-mono/latin-ext-400.css\";\nimport \"@fontsource/ibm-plex-mono/latin-ext-500.css\";\nimport \"@fontsource/ibm-plex-mono/latin-ext-600.css\";\n"],"mappings":";AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;","names":[]}