@mohasinac/appkit 2.1.3 → 2.2.0

package/dist/ui/components/SectionTabs.style.css

@@ -0,0 +1,163 @@
+.appkit-section-tabs {
+  position: sticky;
+  z-index: 10;
+  background: #ffffff;
+  border-bottom: 1px solid #e4e4e7;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+.dark .appkit-section-tabs {
+  background: #020617;
+  border-bottom-color: #334155;
+}
+
+.appkit-section-tabs--admin {
+  background-image: linear-gradient(to right, rgba(250, 245, 255, 0.75), transparent, rgba(238, 242, 255, 0.45));
+}
+
+.appkit-section-tabs--user {
+  background-image: linear-gradient(to right, rgba(238, 242, 255, 0.75), transparent, rgba(240, 253, 250, 0.45));
+}
+
+.dark .appkit-section-tabs--admin {
+  background-image: linear-gradient(to right, rgba(88, 28, 135, 0.2), transparent, rgba(49, 46, 129, 0.12));
+}
+
+.dark .appkit-section-tabs--user {
+  background-image: linear-gradient(to right, rgba(30, 58, 138, 0.2), transparent, rgba(19, 78, 74, 0.12));
+}
+
+.appkit-section-tabs__container {
+  width: min(80rem, 100%);
+  margin: 0 auto;
+}
+
+.appkit-section-tabs__scroll {
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  touch-action: pan-x;
+  padding-bottom: 0.125rem;
+}
+
+.appkit-section-tabs__scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.appkit-section-tabs__scroll--padded {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .appkit-section-tabs__scroll--padded {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+.appkit-section-tabs__track {
+  display: flex;
+  min-width: max-content;
+}
+
+@media (min-width: 1024px) {
+  .appkit-section-tabs__track--full {
+    min-width: 0;
+    width: 100%;
+  }
+}
+
+.appkit-section-tabs__tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  flex: 1;
+  min-width: fit-content;
+  flex-shrink: 0;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: 1px solid transparent;
+  border-radius: 9999px;
+  padding: 0.625rem 1rem;
+  transition: all 0.2s ease;
+}
+
+@media (min-width: 640px) {
+  .appkit-section-tabs__tab {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+}
+
+.appkit-section-tabs__tab:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.55);
+}
+
+.dark .appkit-section-tabs__tab:focus-visible {
+  box-shadow: 0 0 0 2px rgba(240, 99, 185, 0.6);
+}
+
+.appkit-section-tabs__tab--active {
+  border-color: rgba(80, 156, 2, 0.35);
+  background: #509c02;
+  color: #ffffff;
+  box-shadow: 0 10px 24px -12px rgba(34, 197, 94, 0.7);
+}
+
+.dark .appkit-section-tabs__tab--active {
+  border-color: rgba(233, 30, 140, 0.4);
+  background: #e91e8c;
+  color: #ffffff;
+  box-shadow: 0 10px 24px -12px rgba(236, 72, 153, 0.9);
+}
+
+.appkit-section-tabs__tab--inactive {
+  border-color: rgba(80, 156, 2, 0.2);
+  background: rgba(80, 156, 2, 0.1);
+  color: #509c02;
+}
+
+.appkit-section-tabs__tab--inactive:hover {
+  background: rgba(80, 156, 2, 0.18);
+}
+
+.dark .appkit-section-tabs__tab--inactive {
+  border-color: #334155;
+  background: rgba(30, 41, 59, 0.8);
+  color: #f79dd2;
+}
+
+.dark .appkit-section-tabs__tab--inactive:hover {
+  background: rgba(51, 65, 85, 0.9);
+  color: #fce7f3;
+}
+
+.appkit-section-tabs__icon {
+  flex-shrink: 0;
+}
+
+.appkit-section-tabs__count {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 9999px;
+}
+
+.appkit-section-tabs__count--active {
+  background: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+}
+
+.appkit-section-tabs__count--inactive {
+  background: #f4f4f5;
+  color: #71717a;
+}
+
+.dark .appkit-section-tabs__count--inactive {
+  background: #334155;
+  color: #cbd5e1;
+}

package/dist/ui/components/Select.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface SelectOption<V = string> {
+    label: string;
+    value: V;
+    disabled?: boolean;
+}
+export interface SelectProps<V extends string = string> extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onChange"> {
+    options: SelectOption<V>[];
+    value?: V;
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    onValueChange?: (value: V) => void;
+    placeholder?: string;
+    label?: React.ReactNode;
+    error?: React.ReactNode;
+    helperText?: React.ReactNode;
+    required?: boolean;
+    variant?: "default" | "ghost" | "error";
+}
+export declare function Select<V extends string = string>({ options, value, onChange, onValueChange, placeholder, label, error, helperText, disabled, required, className, id, variant, ...props }: SelectProps<V>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Select.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Label, Text } from "./Typography";
+export function Select({ options, value, onChange, onValueChange, placeholder, label, error, helperText, disabled = false, required, className = "", id, variant = "default", ...props }) {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const handleChange = (event) => {
+        onChange?.(event);
+        onValueChange?.(event.target.value);
+    };
+    const variantClass = error || variant === "error"
+        ? "appkit-select__trigger--error"
+        : variant === "ghost"
+            ? "border-transparent bg-transparent shadow-none"
+            : "appkit-select__trigger--default";
+    return (_jsxs("div", { className: "appkit-select", children: [label && (_jsx(Label, { htmlFor: inputId, className: "appkit-select__label", required: required, children: label })), _jsxs("div", { className: "relative group", children: [_jsxs("select", { ...props, id: inputId, value: value, onChange: handleChange, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: [
+                            "appkit-select__trigger",
+                            "w-full appearance-none pr-10",
+                            disabled
+                                ? "appkit-select__trigger--disabled"
+                                : "appkit-select__trigger--enabled",
+                            variantClass,
+                            className,
+                        ]
+                            .filter(Boolean)
+                            .join(" "), children: [placeholder ? (_jsx("option", { value: "", disabled: true, children: placeholder })) : null, options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, String(option.value))))] }), _jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-zinc-400 dark:text-zinc-500", children: _jsx("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error ? (_jsx(Text, { size: "sm", variant: "error", className: "appkit-select__error", role: "alert", children: error })) : helperText ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-select__error", children: helperText })) : null] }));
+}

package/dist/ui/components/Select.style.css

@@ -0,0 +1,177 @@
+.appkit-select {
+  position: relative;
+  width: 100%;
+}
+
+.appkit-select__label {
+  color: #3f3f46;
+}
+
+.dark .appkit-select__label {
+  color: #d4d4d8;
+}
+
+.appkit-select__trigger {
+  width: 100%;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 0.5rem;
+  border: 1px solid #e4e4e7;
+  background: #ffffff;
+  color: #18181b;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.dark .appkit-select__trigger {
+  border-color: #334155;
+  background: rgba(30, 41, 59, 0.6);
+  color: #f8fafc;
+}
+
+.appkit-select__trigger--default:focus-visible {
+  border-color: #65c408;
+  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.2);
+}
+
+.dark .appkit-select__trigger--default:focus-visible {
+  border-color: #e91e8c;
+  box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.2);
+}
+
+.appkit-select__trigger--error {
+  border-color: #f87171;
+}
+
+.appkit-select__trigger--error:focus-visible {
+  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2);
+}
+
+.appkit-select__trigger--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.appkit-select__trigger--enabled {
+  cursor: pointer;
+}
+
+.appkit-select__value {
+  display: inline-flex;
+  align-items: center;
+}
+
+.appkit-select__value--selected {
+  color: #18181b;
+}
+
+.appkit-select__value--placeholder {
+  color: #a1a1aa;
+}
+
+.dark .appkit-select__value--selected {
+  color: #fafafa;
+}
+
+.dark .appkit-select__value--placeholder {
+  color: #737373;
+}
+
+.appkit-select__chevron {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: #a1a1aa;
+  transition: transform 0.2s ease;
+}
+
+.appkit-select__chevron--open {
+  transform: rotate(180deg);
+}
+
+.appkit-select__list {
+  position: absolute;
+  z-index: 50;
+  width: 100%;
+  max-height: 15rem;
+  overflow: auto;
+  border-radius: 0.5rem;
+  border: 1px solid #e4e4e7;
+  background: #ffffff;
+  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.25);
+  padding: 0.25rem 0;
+}
+
+.dark .appkit-select__list {
+  border-color: #334155;
+  background: #1e293b;
+}
+
+.appkit-select__list--up {
+  bottom: 100%;
+  margin-bottom: 0.25rem;
+}
+
+.appkit-select__list--down {
+  top: 100%;
+  margin-top: 0.25rem;
+}
+
+.appkit-select__option {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  user-select: none;
+}
+
+.appkit-select__option--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.appkit-select__option--default {
+  color: #3f3f46;
+  cursor: pointer;
+}
+
+.appkit-select__option--default:hover {
+  background: #fafafa;
+}
+
+.dark .appkit-select__option--default {
+  color: #d4d4d8;
+}
+
+.dark .appkit-select__option--default:hover {
+  background: #334155;
+}
+
+.appkit-select__option--selected {
+  background: #f3ffe3;
+  color: #3e7708;
+}
+
+.dark .appkit-select__option--selected {
+  background: rgba(233, 30, 140, 0.15);
+  color: #f79dd2;
+}
+
+.appkit-select__option-label {
+  flex: 1;
+}
+
+.appkit-select__check {
+  width: 1rem;
+  height: 1rem;
+  margin-left: 0.5rem;
+  flex-shrink: 0;
+}
+
+.appkit-select__error {
+  margin-top: 0.375rem;
+}

package/dist/ui/components/Semantic.d.ts

@@ -0,0 +1,154 @@
+import React from "react";
+/**
+ * Semantic HTML Wrapper Components
+ *
+ * Thin wrappers around HTML5 semantic elements.
+ * Using these instead of raw tags enables:
+ *   - Future one-place theming (add default padding/colour here, it applies everywhere)
+ *   - Enforced accessibility attributes (Nav requires aria-label)
+ *   - Consistent documentation / IDE autocomplete
+ *   - Clean migration path if element defaults change
+ *
+ * All components pass through every standard HTML attribute via `...props`.
+ * Style via `className` using Tailwind CSS classes.
+ *
+ * @example
+ * ```tsx
+ * import { Section, Article, Main, Aside, Nav, Ul, Ol, Li } from '..';
+ *
+ * <Main className="max-w-7xl mx-auto px-4">
+ *   <Section className="py-12">
+ *     <Article>...</Article>
+ *   </Section>
+ *   <Aside className="w-64 shrink-0">...</Aside>
+ * </Main>
+ *
+ * <Nav aria-label="Main navigation">
+ *   <Ul className="flex gap-4">
+ *     <Li>Products</Li>
+ *   </Ul>
+ * </Nav>
+ * ```
+ */
+/**
+ * Semantic `<section>` element.
+ * Use for thematically grouped content that would appear in an outline.
+ * Prefer this over a plain `<div>` when the block has a heading.
+ */
+export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+}
+export declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Semantic `<article>` element.
+ * Use for self-contained compositions: blog posts, product cards, reviews, forum posts.
+ */
+export interface ArticleProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+export declare function Article({ className, children, ...props }: ArticleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Semantic `<main>` element.
+ * Wraps the primary content of the document. Should appear only once per page.
+ */
+export interface MainProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+}
+export declare function Main({ className, children, ...props }: MainProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Semantic `<aside>` element.
+ * Use for supplementary content tangentially related to the main content:
+ * sidebars, callout boxes, related-link panels.
+ */
+export interface AsideProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+}
+export declare const Aside: React.ForwardRefExoticComponent<AsideProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Semantic `<nav>` element with enforced `aria-label`.
+ *
+ * Every `<nav>` on a page MUST have a unique `aria-label` so assistive
+ * technologies can distinguish between multiple navigation landmarks.
+ *
+ * @example
+ * ```tsx
+ * <Nav aria-label="Breadcrumb">...</Nav>
+ * <Nav aria-label="Product categories">...</Nav>
+ * ```
+ */
+export interface NavProps extends React.HTMLAttributes<HTMLElement> {
+    /** REQUIRED — describes the purpose of this navigation region for screen readers. */
+    "aria-label": string;
+    children: React.ReactNode;
+}
+export declare function Nav({ className, children, ...props }: NavProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Semantic `<header>` element for block-level component headers.
+ * Use inside `Section`, `Article`, or card bodies — NOT as the page-level header.
+ *
+ * @example
+ * ```tsx
+ * <Article>
+ *   <BlockHeader className="mb-4">
+ *     <Heading level={2}>Post title</Heading>
+ *   </BlockHeader>
+ * </Article>
+ * ```
+ */
+export interface BlockHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+}
+export declare function BlockHeader({ className, children, ...props }: BlockHeaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Semantic `<footer>` element for block-level component footers.
+ * Use inside `Section`, `Article`, or card bodies — NOT as the page-level footer.
+ */
+export interface BlockFooterProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+}
+export declare function BlockFooter({ className, children, ...props }: BlockFooterProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Semantic `<ul>` (unordered list) element.
+ *
+ * @example
+ * ```tsx
+ * <Ul className="space-y-2">
+ *   <Li>Item one</Li>
+ *   <Li>Item two</Li>
+ * </Ul>
+ * ```
+ */
+export interface UlProps extends React.HTMLAttributes<HTMLUListElement> {
+    children: React.ReactNode;
+}
+export declare function Ul({ className, children, ...props }: UlProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Semantic `<ol>` (ordered list) element.
+ *
+ * @example
+ * ```tsx
+ * <Ol className="list-decimal pl-4 space-y-1">
+ *   <Li>Step one</Li>
+ *   <Li>Step two</Li>
+ * </Ol>
+ * ```
+ */
+export interface OlProps extends React.HTMLAttributes<HTMLOListElement> {
+    children: React.ReactNode;
+}
+export declare function Ol({ className, children, ...props }: OlProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Semantic `<li>` (list item) element. Use inside `Ul` or `Ol`.
+ */
+export interface LiProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    children: React.ReactNode;
+}
+export declare function Li({ className, children, ...props }: LiProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Aliases for `BlockHeader` and `BlockFooter`.
+ * Use when importing from the standard `<Header>` / `<Footer>` names.
+ */
+export type HeaderProps = BlockHeaderProps;
+export declare const Header: typeof BlockHeader;
+export type FooterProps = BlockFooterProps;
+export declare const Footer: typeof BlockFooter;

package/dist/ui/components/Semantic.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+export const Section = React.forwardRef(({ className = "", children, ...props }, ref) => (_jsx("section", { className: className, ref: ref, ...props, children: children })));
+Section.displayName = "Section";
+export function Article({ className = "", children, ...props }) {
+    return (_jsx("article", { className: className, ...props, children: children }));
+}
+export function Main({ className = "", children, ...props }) {
+    return (_jsx("main", { className: className, ...props, children: children }));
+}
+export const Aside = React.forwardRef(({ className = "", children, ...props }, ref) => (_jsx("aside", { className: className, ref: ref, ...props, children: children })));
+Aside.displayName = "Aside";
+export function Nav({ className = "", children, ...props }) {
+    return (_jsx("nav", { className: className, ...props, children: children }));
+}
+export function BlockHeader({ className = "", children, ...props }) {
+    return (_jsx("header", { className: className, ...props, children: children }));
+}
+export function BlockFooter({ className = "", children, ...props }) {
+    return (_jsx("footer", { className: className, ...props, children: children }));
+}
+export function Ul({ className = "", children, ...props }) {
+    return (_jsx("ul", { className: className, ...props, children: children }));
+}
+export function Ol({ className = "", children, ...props }) {
+    return (_jsx("ol", { className: className, ...props, children: children }));
+}
+export function Li({ className = "", children, ...props }) {
+    return (_jsx("li", { className: className, ...props, children: children }));
+}
+export const Header = BlockHeader;
+export const Footer = BlockFooter;

package/dist/ui/components/Semantic.style.css

@@ -0,0 +1,14 @@
+/* Semantic — HTML5 landmark wrappers (Section, Article, Main, Aside, Nav, etc.) */
+/* Pure passthroughs — no default styles. Exists for style contract compliance. */
+/* Consumer themes may add base landmark styles via these hooks. */
+
+.appkit-section {}
+.appkit-article {}
+.appkit-main {}
+.appkit-aside {}
+.appkit-nav {}
+.appkit-header {}
+.appkit-footer {}
+.appkit-ul {}
+.appkit-ol {}
+.appkit-li {}

package/dist/ui/components/SideDrawer.d.ts

@@ -0,0 +1,28 @@
+import "client-only";
+import { ReactNode } from "react";
+export type DrawerMode = "create" | "edit" | "delete" | "view";
+export interface SideDrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+    footer?: ReactNode;
+    /** Drawer mode controls header styling and unsaved-changes behaviour */
+    mode?: DrawerMode;
+    /** Whether the form has unsaved changes — triggers a warning on close */
+    isDirty?: boolean;
+    /** Which side the drawer opens from. Defaults to "right". */
+    side?: "left" | "right";
+}
+/**
+ * SideDrawer — accessible slide-in panel with focus trap, swipe-to-close,
+ * and an optional unsaved-changes confirmation overlay.
+ *
+ * @example
+ * ```tsx
+ * <SideDrawer isOpen={open} onClose={() => setOpen(false)} title="Edit product" mode="edit" isDirty={isDirty}>
+ *   <MyForm />
+ * </SideDrawer>
+ * ```
+ */
+export declare function SideDrawer({ isOpen, onClose, title, children, footer, mode, isDirty, side, }: SideDrawerProps): import("react/jsx-runtime").JSX.Element | null;