@balikjs/mobile 0.0.1

package/src/Tooltip/Tooltip.module.css

@@ -0,0 +1,41 @@
+.trigger {
+  display: inline-flex;
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: inherit;
+}
+
+.positioner {
+  z-index: calc(var(--b-z-index-modal) + 1);
+}
+
+.content {
+  padding: 4px 10px;
+  border-radius: 6px;
+  background-color: color-mix(in oklch, var(--base-fg) 90%, var(--base-bg));
+  color: var(--base-bg);
+  font-size: 12px;
+  line-height: 18px;
+  font-family: var(--b-font-family, inherit);
+  white-space: nowrap;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  animation: tooltipIn 0.15s ease;
+}
+
+@keyframes tooltipIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.arrowTip {
+  --arrow-size: 6px;
+  --arrow-background: color-mix(in oklch, var(--base-fg) 90%, var(--base-bg));
+}

package/src/Tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip.jsx'

package/src/index.js

@@ -0,0 +1,34 @@
+export { Button } from './Button/Button.jsx'
+export { Input } from './Input/Input.jsx'
+export { Textarea } from './Textarea/Textarea.jsx'
+export { Select } from './Select/Select.jsx'
+export { SelectPc } from './SelectPc/Select.jsx'
+export { Checkbox } from './Checkbox/Checkbox.jsx'
+export { RadioGroup } from './RadioGroup/RadioGroup.jsx'
+export { Radio } from './RadioGroup/Radio.jsx'
+export { Switch } from './Switch/Switch.jsx'
+export { Toast, toast } from './Toast/Toast.jsx'
+export { Dialog } from './Dialog/Dialog.jsx'
+export { Confirm } from './Confirm/Confirm.jsx'
+export { Alert } from './Alert/Alert.jsx'
+export { Tabs } from './Tabs/Tabs.jsx'
+export { Skeleton } from './Skeleton/Skeleton.jsx'
+export { Divider } from './Divider/Divider.jsx'
+export { Badge } from './Badge/Badge.jsx'
+export { Avatar } from './Avatar/Avatar.jsx'
+export { CloseButton } from './CloseButton/CloseButton.jsx'
+export { SearchInput } from './SearchInput/SearchInput.jsx'
+export { Clipboard } from './Clipboard/Clipboard.jsx'
+export { Spinner } from './Spinner/Spinner.jsx'
+export { Empty } from './Empty/Empty.jsx'
+export { Tag } from './Tag/Tag.jsx'
+export { BottomSheet } from './BottomSheet/BottomSheet.jsx'
+export { Card } from './Card/Card.jsx'
+export { Slider } from './Slider/Slider.jsx'
+export { BottomNavigation } from './BottomNavigation/BottomNavigation.jsx'
+export { Link } from './Link/Link.jsx'
+export { Drawer } from './Drawer/Drawer.jsx'
+export { Tooltip } from './Tooltip/Tooltip.jsx'
+export { Popover } from './Popover/Popover.jsx'
+export { Fab } from './Fab/Fab.jsx'
+import './styles/index.css'

package/src/styles/index.css

@@ -0,0 +1,90 @@
+@import './tokens.css';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  font-family: var(--b-font-family);
+  font-size: var(--b-font-size-md);
+  line-height: var(--b-line-height);
+  color: var(--base-fg);
+  background-color: var(--base-bg);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-inline-size: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+p {
+  text-wrap: pretty;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+  font-weight: 600;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+:where(ul, ol) {
+  list-style: none;
+}
+
+:where(table) {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+:where(button) {
+  appearance: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+:where([hidden]) {
+  display: none;
+}

package/src/styles/tokens.css

@@ -0,0 +1,227 @@
+:root {
+  /* ══════════════════════════════════════════════
+     Layer 1 — Anchor Tokens
+     ══════════════════════════════════════════════ */
+
+  /* Base Surfaces & Foreground */
+  --base-bg: oklch(99% 0 0);
+  --base-fg: oklch(15% 0 0);
+
+  /* Gray Neutral Anchor */
+  --base-gray: oklch(72% 0 0);
+
+  /* Disabled State Anchors (derived from --base-gray) */
+  --color-disabled-bg: oklch(from var(--base-gray) calc(l + 0.16) c h);
+  --color-disabled-fg: oklch(from var(--base-gray) calc(l - 0.17) c h);
+  --color-disabled-border: var(--base-gray);
+
+  /* Primary Intent Seed (Default: non-pure blue) */
+  --base-edge: oklch(0.55 0.16 250);
+
+  /* Framework Functional Seeds */
+  --color-danger: oklch(0.55 0.18 25);
+
+  /* System Reserved Tokens (not used by Button components) */
+  --color-success: oklch(0.60 0.18 145);
+  --color-warning: oklch(0.70 0.18 75);
+  --color-info: oklch(0.60 0.15 230);
+
+  /* Focus State Tokens (Input / Textarea only) */
+  --color-focus-bg: color-mix(in oklch, var(--base-fg) 3%, var(--base-bg));
+  --color-focus-border: oklch(from var(--base-edge) calc(l - 0.12) calc(c + 0.02) h);
+
+  /* ══════════════════════════════════════════════
+     Layer 2 — Hue Coefficient Table
+     Currently validated: default intent hue (~250°) only.
+     Custom hues must add their own threshold + maxChroma entry
+     before foreground-selection guarantees apply.
+     ══════════════════════════════════════════════ */
+  --b-threshold-default-hue: 0.60;
+  --b-maxChroma-default-hue: 0.20;
+
+  /* ══════════════════════════════════════════════
+     Legacy aliases for non-color tokens
+     (typography, spacing, radius — not part of the
+     algorithmic color derivation)
+     ══════════════════════════════════════════════ */
+  --b-font-family: system-ui, -apple-system, sans-serif;
+  --b-font-size-xs: 10px;
+  --b-font-size-sm: 12px;
+  --b-font-size-md: 14px;
+  --b-font-size-lg: 16px;
+  --b-font-size-xl: 20px;
+  --b-font-size-xxl: 24px;
+  --b-line-height: 1.5;
+
+  --b-spacing-xxs: 2px;
+  --b-spacing-xs: 4px;
+  --b-spacing-sm: 8px;
+  --b-spacing-md: 12px;
+  --b-spacing-lg: 16px;
+  --b-spacing-xl: 24px;
+  --b-spacing-xxl: 32px;
+
+  /* ══════════════════════════════════════════════
+     Abstract Size Level Sequences (component-agnostic)
+     Primary:   step = 4px, used by Button / Input / Select / Avatar / CloseButton / …
+     Secondary: step = 2px, used by Badge / Switch / Tag / Checkbox / Radio / …
+     At every size token, Secondary height = Primary height ÷ 2
+     ══════════════════════════════════════════════ */
+  --b-level-primary-xs:   32px;
+  --b-level-primary-sm:   36px;
+  --b-level-primary-md:   40px;
+  --b-level-primary-lg:   44px;
+  --b-level-primary-xl:   48px;
+  --b-level-primary-2xl:  64px;
+
+  --b-level-secondary-xs:   16px;
+  --b-level-secondary-sm:   18px;
+  --b-level-secondary-md:   20px;
+  --b-level-secondary-lg:   22px;
+  --b-level-secondary-xl:   24px;
+  --b-level-secondary-2xl:  32px;
+
+  /* ══════════════════════════════════════════════
+     Primary Component Height-Anchored Sizing Tokens
+     Formula: Height = LineHeight + (PaddingY * 2) + (BorderWidth * 2)
+     Border width is always 1px for primary components.
+     ══════════════════════════════════════════════ */
+  --b-comp-height-xs:  var(--b-level-primary-xs);
+  --b-comp-height-sm:  var(--b-level-primary-sm);
+  --b-comp-height-md:  var(--b-level-primary-md);
+  --b-comp-height-lg:  var(--b-level-primary-lg);
+  --b-comp-height-xl:  var(--b-level-primary-xl);
+  --b-comp-height-2xl: var(--b-level-primary-2xl);
+
+  --b-comp-font-size-xs: 12px;
+  --b-comp-font-size-sm: 14px;
+  --b-comp-font-size-md: 14px;
+  --b-comp-font-size-lg: 16px;
+  --b-comp-font-size-xl: 18px;
+  --b-comp-font-size-2xl: 20px;
+
+  --b-comp-line-height-xs: 16px;
+  --b-comp-line-height-sm: 20px;
+  --b-comp-line-height-md: 20px;
+  --b-comp-line-height-lg: 24px;
+  --b-comp-line-height-xl: 28px;
+  --b-comp-line-height-2xl: 30px;
+
+  --b-comp-padding-y-xs: 7px;
+  --b-comp-padding-y-sm: 7px;
+  --b-comp-padding-y-md: 9px;
+  --b-comp-padding-y-lg: 9px;
+  --b-comp-padding-y-xl: 9px;
+  --b-comp-padding-y-2xl: 16px;
+
+  --b-comp-padding-x-xs: 8px;
+  --b-comp-padding-x-sm: 12px;
+  --b-comp-padding-x-md: 16px;
+  --b-comp-padding-x-lg: 20px;
+  --b-comp-padding-x-xl: 24px;
+  --b-comp-padding-x-2xl: 32px;
+
+  /* Secondary Component Height Tokens
+     For secondary components (Badge, Switch, Tag, Checkbox, Radio)
+     ───────────────────────────────────────────── */
+  --b-comp-secondary-height-xs:  var(--b-level-secondary-xs);
+  --b-comp-secondary-height-sm:  var(--b-level-secondary-sm);
+  --b-comp-secondary-height-md:  var(--b-level-secondary-md);
+  --b-comp-secondary-height-lg:  var(--b-level-secondary-lg);
+  --b-comp-secondary-height-xl:  var(--b-level-secondary-xl);
+  --b-comp-secondary-height-2xl: var(--b-level-secondary-2xl);
+
+  /* ══════════════════════════════════════════════
+     Container Padding Tokens (4pt Grid)
+     ══════════════════════════════════════════════ */
+  --b-container-padding-sm: 12px;
+  --b-container-padding-md: 16px;
+  --b-container-padding-lg: 24px;
+  --b-container-padding-xl: 32px;
+
+  /* ══════════════════════════════════════════════
+     Concentric Border Radius System
+     L3 = Top-level Containers (fixed 16px)
+     L2 = Mid-level Containers  (fixed 8px)
+     L1 = Atomic Components      (formula-driven)
+       L1 = max(2px, (Height - 32px) * 0.5)
+     ══════════════════════════════════════════════ */
+  --b-radius-round: 9999px;
+
+  /* Default Rounded Theme — per-size values */
+  --b-radius-l3-xs: 16px;
+  --b-radius-l2-xs: 8px;
+  --b-radius-l1-xs: 2px;
+
+  --b-radius-l3-sm: 16px;
+  --b-radius-l2-sm: 8px;
+  --b-radius-l1-sm: 2px;
+
+  --b-radius-l3-md: 16px;
+  --b-radius-l2-md: 8px;
+  --b-radius-l1-md: 4px;
+
+  --b-radius-l3-lg: 16px;
+  --b-radius-l2-lg: 8px;
+  --b-radius-l1-lg: 6px;
+
+  --b-radius-l3-xl: 16px;
+  --b-radius-l2-xl: 8px;
+  --b-radius-l1-xl: 8px;
+
+  --b-radius-l3-2xl: 16px;
+  --b-radius-l2-2xl: 8px;
+  --b-radius-l1-2xl: 16px;
+
+  --b-transition-fast: 0.15s ease;
+  --b-transition-normal: 0.3s ease;
+
+  --b-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --b-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --b-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+  --b-z-index-base: 0;
+  --b-z-index-dropdown: 100;
+  --b-z-index-modal: 200;
+  --b-z-index-toast: 300;
+}
+
+/* ─────────────────────────────────────────────────
+   High Contrast Mode
+   ───────────────────────────────────────────────── */
+@media (prefers-contrast: more) {
+  :root {
+    --base-fg: oklch(5% 0 0);
+  }
+}
+
+/* ─────────────────────────────────────────────────
+   Radius Theme Presets (Section 4.2)
+   Override L1/L2/L3 at all size steps uniformly.
+   ───────────────────────────────────────────────── */
+[data-balik-theme='sharp'] {
+  --b-radius-l3-xs: 0; --b-radius-l2-xs: 0; --b-radius-l1-xs: 0;
+  --b-radius-l3-sm: 0; --b-radius-l2-sm: 0; --b-radius-l1-sm: 0;
+  --b-radius-l3-md: 0; --b-radius-l2-md: 0; --b-radius-l1-md: 0;
+  --b-radius-l3-lg: 0; --b-radius-l2-lg: 0; --b-radius-l1-lg: 0;
+  --b-radius-l3-xl: 0; --b-radius-l2-xl: 0; --b-radius-l1-xl: 0;
+  --b-radius-l3-2xl: 0; --b-radius-l2-2xl: 0; --b-radius-l1-2xl: 0;
+}
+
+[data-balik-theme='compact'] {
+  --b-radius-l3-xs: 8px; --b-radius-l2-xs: 4px; --b-radius-l1-xs: 2px;
+  --b-radius-l3-sm: 8px; --b-radius-l2-sm: 4px; --b-radius-l1-sm: 2px;
+  --b-radius-l3-md: 8px; --b-radius-l2-md: 4px; --b-radius-l1-md: 2px;
+  --b-radius-l3-lg: 8px; --b-radius-l2-lg: 4px; --b-radius-l1-lg: 2px;
+  --b-radius-l3-xl: 8px; --b-radius-l2-xl: 4px; --b-radius-l1-xl: 2px;
+  --b-radius-l3-2xl: 8px; --b-radius-l2-2xl: 4px; --b-radius-l1-2xl: 2px;
+}
+
+[data-balik-theme='pill'] {
+  --b-radius-l3-xs: 24px; --b-radius-l2-xs: var(--b-radius-round); --b-radius-l1-xs: var(--b-radius-round);
+  --b-radius-l3-sm: 24px; --b-radius-l2-sm: var(--b-radius-round); --b-radius-l1-sm: var(--b-radius-round);
+  --b-radius-l3-md: 24px; --b-radius-l2-md: var(--b-radius-round); --b-radius-l1-md: var(--b-radius-round);
+  --b-radius-l3-lg: 24px; --b-radius-l2-lg: var(--b-radius-round); --b-radius-l1-lg: var(--b-radius-round);
+  --b-radius-l3-xl: 24px; --b-radius-l2-xl: var(--b-radius-round); --b-radius-l1-xl: var(--b-radius-round);
+  --b-radius-l3-2xl: 24px; --b-radius-l2-2xl: var(--b-radius-round); --b-radius-l1-2xl: var(--b-radius-round);
+}