@unofficialbox/box-open-elements 0.1.0

package/dist/foundations/geometry/tokens.js

@@ -0,0 +1,154 @@
+/**
+ * Box Design Language geometry — sourced from box-ui-elements
+ * `src/styles/constants/_layout.scss`, `_buttons.scss`, and `_inputs.scss`.
+ *
+ * Prefer these over ad-hoc rem bands when styling everyday controls so the
+ * catalog tracks upstream Box chrome (4px grid, 32px controls, 4/6/8/12 radii).
+ */
+/** `$bdl-grid-unit` — spacing scale root (4px). */
+export const boeSpace = {
+    unit: "4px",
+    /** 1 × grid */
+    1: "4px",
+    /** 2 × grid */
+    2: "8px",
+    /** 3 × grid */
+    3: "12px",
+    /** 4 × grid — button horizontal padding */
+    4: "16px",
+    /** 5 × grid */
+    5: "20px",
+    /** 6 × grid — overlay padding */
+    6: "24px",
+    /** 8 × grid — modal-ish pad / control height */
+    8: "32px",
+    /** 10 × grid */
+    10: "40px",
+    /** 12 × grid — menu-item trailing pad */
+    12: "48px",
+};
+/**
+ * Pattern / panel shell chrome — denser BDL card surfaces (12 / 8)
+ * used by share panels, explorers, insights cards, etc.
+ */
+export const boePanel = {
+    padding: "12px",
+    /** Card / panel surface — Box 16px (was 8px). */
+    radius: "16px",
+    gap: "12px",
+    border: "1px solid var(--boe-token-stroke-stroke, #e8e8e8)",
+    background: "var(--boe-token-surface-surface, #ffffff)",
+    /** Content-sidebar-ish drawer width */
+    drawerWidth: "340px",
+};
+/**
+ * Overlay / menu / flyout chrome — `mixins/_overlay.scss` + Menu.scss.
+ */
+export const boeOverlay = {
+    /** Container pad — 3 × grid */
+    padding: "12px",
+    /** Menu / popover surface — Box 20px (was 8px). */
+    radius: "20px",
+    shadow: "0 4px 12px 0 rgb(0 0 0 / 10%)",
+    border: "1px solid var(--boe-token-stroke-stroke, #e8e8e8)",
+    /** Menu item — min-height 30; item radius 12px (Box). */
+    itemPadding: "8px 48px 8px 8px",
+    itemMinHeight: "30px",
+    itemRadius: "12px",
+    /** Modal — dialog radius 24px (Box; was 12px). */
+    modalPadding: "30px",
+    modalWidth: "460px",
+    modalRadius: "24px",
+    modalShadow: "0 1px 1px 1px rgb(0 0 0 / 5%)",
+    modalTitleSize: "16px",
+    modalBackdrop: "rgba(0, 0, 0, 0.75)",
+};
+/**
+ * Corner radii. box-open-elements tracks the **live Box web app** (Blueprint),
+ * which ships pill-shaped controls and larger surface radii — captured from
+ * `app.box.com` (see `docs/audits/box-webapp-reference.data.json`). This is an
+ * intentional divergence from box-ui-elements' legacy SCSS geometry (4/6/8/12);
+ * the Layer 1 audit records it as such.
+ *
+ * Role guide: `control` for buttons/inputs, `field` for search + dialogs, `nav`
+ * for nav items, `large` for cards/panels, `med` for rows/small surfaces,
+ * `size` for badges/checkboxes, `pill` for chips/toggles.
+ */
+export const boeRadius = {
+    /** Badges, checkboxes, tiny chips — Box ~4px. */
+    size: "4px",
+    /** Rows, small surfaces, list-item hover — Box 12px (was 6px). */
+    med: "12px",
+    /** Cards, panels — Box 16px (was 8px). */
+    large: "16px",
+    /** Controls (buttons, inputs) + menus — Box 20px (was 12px). */
+    xlarge: "20px",
+    /** Interactive controls — buttons, inputs. Box pill radius 20px. */
+    control: "20px",
+    /** Large fields (search) + dialogs/modals — Box 24px. */
+    field: "24px",
+    /** Nav items — Box 28px. */
+    nav: "28px",
+    /** True pills — chips, toggles, label-pills. */
+    pill: "999px",
+};
+/** `$bdl-btn-height*` + related control metrics. */
+export const boeControl = {
+    height: "32px",
+    heightLarge: "40px",
+    paddingInline: "16px",
+    /** Pill control radius — buttons/inputs. Box 20px. */
+    radius: "20px",
+    /** Shared input pad from `@mixin box-inputs` */
+    inputPadding: "7px",
+    /** BUE select control height */
+    selectHeight: "34px",
+    /** Legacy body font used on `.btn` */
+    fontSize: "13px",
+    letterSpacing: "0.035em",
+    /** BUE disabled control opacity */
+    disabledOpacity: "0.4",
+    /** Input border — `$bdl-gray-20` / SurfaceSurfaceQuaternary */
+    inputBorder: "var(--boe-token-surface-surface-quaternary, #d3d3d3)",
+    /** Button secondary border — `$bdl-gray-30` / StrokeStrokeHover */
+    buttonBorder: "var(--boe-token-stroke-stroke-hover, #bcbcbc)",
+    /** `@mixin box-inputs` inset shadow */
+    inputInsetShadow: "inset 0 2px 4px rgb(0 0 0 / 10%)",
+    /** Overlay / menu shadow — `mixins/_overlay.scss` */
+    overlayShadow: "0 4px 12px 0 rgb(0 0 0 / 10%)",
+    /** Primary button focus inset ring */
+    primaryFocusShadow: "inset 0 0 0 1px rgb(255 255 255 / 80%), 0 1px 2px rgb(0 0 0 / 10%)",
+};
+/** Shared text-field / select chrome matching `@mixin box-inputs`. */
+export const boeInputControlStyles = (selector) => `
+  ${selector} {
+    box-sizing: border-box;
+    min-height: ${boeControl.height};
+    padding: ${boeControl.inputPadding};
+    color: var(--boe-token-text-text, #222222);
+    border: 1px solid ${boeControl.inputBorder};
+    border-radius: ${boeRadius.med};
+    background: var(--boe-token-surface-surface, #ffffff);
+    box-shadow: ${boeControl.inputInsetShadow};
+    transition:
+      border-color linear 0.15s,
+      box-shadow linear 0.1s;
+  }
+
+  ${selector}:hover:not(:disabled) {
+    box-shadow: ${boeControl.inputInsetShadow};
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+  }
+
+  ${selector}:focus-visible {
+    outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5);
+    outline-offset: 1px;
+    border-color: var(--boe-token-surface-surface-brand, #0061d5);
+    box-shadow: ${boeControl.inputInsetShadow};
+  }
+
+  ${selector}:disabled {
+    opacity: ${boeControl.disabledOpacity};
+    cursor: not-allowed;
+  }
+`;

package/dist/foundations/icons/box-iconography.d.ts

@@ -0,0 +1,479 @@
+import { boxGeneratedIconCounts, boxGeneratedIconMetadata, boxGeneratedIcons, boxGeneratedIconKeys } from "./box-iconography.generated.js";
+export declare const boxIconographyAliases: {
+    [k: string]: string;
+};
+export declare const boxIconography: {
+    readonly "2-chat-question": string;
+    readonly "2-chat": string;
+    readonly "2-overlay-squares": string;
+    readonly "3-overlay-squares": string;
+    readonly "3-square-circle": string;
+    readonly "3-tier": string;
+    readonly "4-squares": string;
+    readonly "4-squares-2": string;
+    readonly "6-dots": string;
+    readonly "add-small": string;
+    readonly "add-squares": string;
+    readonly "add-to-cart": string;
+    readonly aid: string;
+    readonly "app-cloud": string;
+    readonly "arrow-down": string;
+    readonly "arrow-right": string;
+    readonly attachment: string;
+    readonly audio: string;
+    readonly award: string;
+    readonly badge: string;
+    readonly bag: string;
+    readonly bank: string;
+    readonly battery: string;
+    readonly bell: string;
+    readonly binders: string;
+    readonly "bolt-bubble": string;
+    readonly bolt: string;
+    readonly brain: string;
+    readonly briefcase: string;
+    readonly broadcast: string;
+    readonly browser: string;
+    readonly brush: string;
+    readonly "calendar-added": string;
+    readonly calendar: string;
+    readonly "calendar-2": string;
+    readonly cart: string;
+    readonly "cart-2": string;
+    readonly cash: string;
+    readonly "caution-file": string;
+    readonly "caution-phone": string;
+    readonly "caution-triangle": string;
+    readonly center: string;
+    readonly "chat-bubble": string;
+    readonly "chat-question": string;
+    readonly check: string;
+    readonly checkmark: string;
+    readonly clipboard: string;
+    readonly clock1: string;
+    readonly clock2: string;
+    readonly clock3: string;
+    readonly "cloud-server": string;
+    readonly cloud: string;
+    readonly "code-browser": string;
+    readonly code: string;
+    readonly compass: string;
+    readonly "computer-badge": string;
+    readonly "computer-download": string;
+    readonly "computer-upoad": string;
+    readonly computer: string;
+    readonly "connected-dots": string;
+    readonly "connected-together": string;
+    readonly "container-lines-2": string;
+    readonly "container-lines": string;
+    readonly "cube-dot-line": string;
+    readonly "cube-line": string;
+    readonly cycle: string;
+    readonly dna: string;
+    readonly "desktop-laptop": string;
+    readonly devices: string;
+    readonly distribute: string;
+    readonly "distribute-2": string;
+    readonly "dollar-sign": string;
+    readonly "donut-coffee": string;
+    readonly download: string;
+    readonly drop: string;
+    readonly "enterprise-building": string;
+    readonly "envelope-bug": string;
+    readonly "envelope-doc": string;
+    readonly "envelope-shred": string;
+    readonly envelope: string;
+    readonly "exclamation-mark": string;
+    readonly eye: string;
+    readonly "ftp-folder": string;
+    readonly "file-approved": string;
+    readonly "file-blank": string;
+    readonly "file-check": string;
+    readonly "file-cloud": string;
+    readonly "file-copy": string;
+    readonly "file-document": string;
+    readonly "file-image": string;
+    readonly "file-infographic": string;
+    readonly "file-insights": string;
+    readonly "file-presentations": string;
+    readonly "file-speed": string;
+    readonly "file-spreadsheet": string;
+    readonly "file-text": string;
+    readonly "file-video": string;
+    readonly "file-bug": string;
+    readonly "file-move": string;
+    readonly "file-music": string;
+    readonly "file-plus": string;
+    readonly "finger-print": string;
+    readonly flight: string;
+    readonly "folder-up": string;
+    readonly "folder-upload": string;
+    readonly folder: string;
+    readonly funnel: string;
+    readonly gear: string;
+    readonly gears: string;
+    readonly "graduation-cap": string;
+    readonly "graph-increase": string;
+    readonly "graph-measure": string;
+    readonly "group-call": string;
+    readonly heart: string;
+    readonly home: string;
+    readonly image: string;
+    readonly "key-safe": string;
+    readonly "leaves-growing": string;
+    readonly light: string;
+    readonly "line-graph-v2": string;
+    readonly "line-graph": string;
+    readonly link: string;
+    readonly lock: string;
+    readonly "magnifying-glass": string;
+    readonly martini: string;
+    readonly maze: string;
+    readonly "med-tool": string;
+    readonly megaphone: string;
+    readonly metadata: string;
+    readonly microphone: string;
+    readonly minus: string;
+    readonly "mixed-media-download": string;
+    readonly "music-note": string;
+    readonly "note-pad": string;
+    readonly number0: string;
+    readonly number1: string;
+    readonly number2: string;
+    readonly number3: string;
+    readonly number4: string;
+    readonly number5: string;
+    readonly number6: string;
+    readonly number7: string;
+    readonly number8: string;
+    readonly number9: string;
+    readonly "o-maru": string;
+    readonly overlay: string;
+    readonly paper: string;
+    readonly pen: string;
+    readonly person: string;
+    readonly "phone-browser": string;
+    readonly phone: string;
+    readonly "phone-2": string;
+    readonly "pie-chart-3": string;
+    readonly "pie-chart": string;
+    readonly pin: string;
+    readonly "pin-2": string;
+    readonly plane: string;
+    readonly plus: string;
+    readonly podium: string;
+    readonly "point-center": string;
+    readonly point: string;
+    readonly "question-mark": string;
+    readonly raft: string;
+    readonly "retail-tag": string;
+    readonly "right-to-forget": string;
+    readonly ring: string;
+    readonly rocket: string;
+    readonly "smb-building": string;
+    readonly scale: string;
+    readonly "scale-2": string;
+    readonly scan: string;
+    readonly server: string;
+    readonly "shake-love": string;
+    readonly "shared-users": string;
+    readonly "shield-2-tone": string;
+    readonly "shield-check": string;
+    readonly "shield-varified": string;
+    readonly slice: string;
+    readonly slider: string;
+    readonly "solid-arrow-down": string;
+    readonly "solid-arrow-right": string;
+    readonly "solid-check": string;
+    readonly "solid-checkmark": string;
+    readonly "solid-clock1": string;
+    readonly "solid-clock2": string;
+    readonly "solid-compass": string;
+    readonly "solid-dollar-sign": string;
+    readonly "solid-exclamation-mark": string;
+    readonly "solid-minus": string;
+    readonly "solid-o-maru": string;
+    readonly "solid-play": string;
+    readonly "solid-plus": string;
+    readonly "solid-question-mark": string;
+    readonly "solid-x-batsu": string;
+    readonly "speach-bubble": string;
+    readonly spotlight: string;
+    readonly "spray-bottle": string;
+    readonly "squares-scale-top": string;
+    readonly "squares-scale": string;
+    readonly "squares-together": string;
+    readonly star: string;
+    readonly "stop-hand": string;
+    readonly "storage-cloud": string;
+    readonly "storage-key": string;
+    readonly storage: string;
+    readonly sun: string;
+    readonly target: string;
+    readonly "team-add": string;
+    readonly team: string;
+    readonly thumb: string;
+    readonly toggle: string;
+    readonly tools: string;
+    readonly trophy: string;
+    readonly truck: string;
+    readonly "two-files": string;
+    readonly "typing-now": string;
+    readonly typing: string;
+    readonly usb: string;
+    readonly "up-down": string;
+    readonly "upload-cloud": string;
+    readonly upload: string;
+    readonly "user-alert": string;
+    readonly "user-verified": string;
+    readonly "user-verified-unknown": string;
+    readonly "user-badge": string;
+    readonly "user-primary": string;
+    readonly "user-timed": string;
+    readonly "video-camera": string;
+    readonly "video-camera-2": string;
+    readonly video: string;
+    readonly writing: string;
+    readonly "x-batsu": string;
+    readonly zones: string;
+    readonly play: string;
+    readonly "2-chat-question-2": string;
+    readonly "2-chat-2": string;
+    readonly "2-overlay-squares-2": string;
+    readonly "3-overlay-squares-2": string;
+    readonly "3-square-circle-2": string;
+    readonly "3-tier-2": string;
+    readonly "4-squares-1": string;
+    readonly "4-squares-3": string;
+    readonly "6-dots-2": string;
+    readonly "add-small-2": string;
+    readonly "add-squares-2": string;
+    readonly "add-to-cart-2": string;
+    readonly "aid-2": string;
+    readonly "app-cloud-2": string;
+    readonly "arrow-down-2": string;
+    readonly "arrow-right-2": string;
+    readonly "attachment-2": string;
+    readonly "audio-2": string;
+    readonly "award-2": string;
+    readonly "badge-2": string;
+    readonly "bag-2": string;
+    readonly "bank-2": string;
+    readonly "battery-2": string;
+    readonly "bell-2": string;
+    readonly "binders-2": string;
+    readonly "bolt-bubble-2": string;
+    readonly "bolt-2": string;
+    readonly "brain-2": string;
+    readonly "briefcase-2": string;
+    readonly "broadcast-2": string;
+    readonly "browser-2": string;
+    readonly "brush-2": string;
+    readonly "calendar-1": string;
+    readonly "calendar-added-2": string;
+    readonly "calendar-3": string;
+    readonly "cart-1": string;
+    readonly "cart-3": string;
+    readonly "cash-2": string;
+    readonly "caution-file-2": string;
+    readonly "caution-phone-2": string;
+    readonly "caution-triangle-2": string;
+    readonly "center-2": string;
+    readonly "chat-bubble-2": string;
+    readonly "chat-question-2": string;
+    readonly "check-2": string;
+    readonly "checkmark-2": string;
+    readonly "clipboard-2": string;
+    readonly "clock1-2": string;
+    readonly "clock2-2": string;
+    readonly "clock3-2": string;
+    readonly "cloud-server-2": string;
+    readonly "cloud-2": string;
+    readonly "code-browser-2": string;
+    readonly "code-2": string;
+    readonly "compass-2": string;
+    readonly "computer-badge-2": string;
+    readonly "computer-download-2": string;
+    readonly "computer-upoad-2": string;
+    readonly "computer-2": string;
+    readonly "connected-dots-2": string;
+    readonly "connected-together-2": string;
+    readonly "container-lines-2-2": string;
+    readonly "container-lines-3": string;
+    readonly "cube-dot-line-2": string;
+    readonly "cube-line-2": string;
+    readonly "cycle-2": string;
+    readonly "dna-2": string;
+    readonly "desktop-laptop-2": string;
+    readonly "devices-2": string;
+    readonly "distribute-1": string;
+    readonly "distribute-3": string;
+    readonly "dollar-sign-2": string;
+    readonly "donut-coffee-2": string;
+    readonly "download-2": string;
+    readonly "drop-2": string;
+    readonly "enterprise-building-2": string;
+    readonly "envelope-bug-2": string;
+    readonly "envelope-doc-2": string;
+    readonly "envelope-shred-2": string;
+    readonly "envelope-2": string;
+    readonly "exclamation-mark-2": string;
+    readonly "eye-2": string;
+    readonly "ftp-folder-2": string;
+    readonly "file-approved-2": string;
+    readonly "file-blank-2": string;
+    readonly "file-check-2": string;
+    readonly "file-cloud-2": string;
+    readonly "file-copy-2": string;
+    readonly "file-document-2": string;
+    readonly "file-image-2": string;
+    readonly "file-infographic-2": string;
+    readonly "file-insights-2": string;
+    readonly "file-presentations-2": string;
+    readonly "file-speed-2": string;
+    readonly "file-spreadsheet-2": string;
+    readonly "file-text-2": string;
+    readonly "file-video-2": string;
+    readonly "file-bug-2": string;
+    readonly "file-move-2": string;
+    readonly "file-music-2": string;
+    readonly "file-plus-2": string;
+    readonly "finger-print-2": string;
+    readonly "flight-2": string;
+    readonly "folder-up-2": string;
+    readonly "folder-upload-2": string;
+    readonly "folder-2": string;
+    readonly "funnel-2": string;
+    readonly "gear-2": string;
+    readonly "gears-2": string;
+    readonly "graduation-cap-2": string;
+    readonly "graph-increase-2": string;
+    readonly "graph-measure-2": string;
+    readonly "group-call-2": string;
+    readonly "heart-2": string;
+    readonly "home-2": string;
+    readonly "image-2": string;
+    readonly "key-safe-2": string;
+    readonly "leaves-growing-2": string;
+    readonly "light-2": string;
+    readonly "line-graph-v2-2": string;
+    readonly "line-graph-2": string;
+    readonly "link-2": string;
+    readonly "lock-2": string;
+    readonly "magnifying-glass-2": string;
+    readonly "martini-2": string;
+    readonly "maze-2": string;
+    readonly "med-tool-2": string;
+    readonly "megaphone-2": string;
+    readonly "metadata-2": string;
+    readonly "microphone-2": string;
+    readonly "minus-2": string;
+    readonly "mixed-media-download-2": string;
+    readonly "music-note-2": string;
+    readonly "note-pad-2": string;
+    readonly "number0-2": string;
+    readonly "number1-2": string;
+    readonly "number2-2": string;
+    readonly "number3-2": string;
+    readonly "number4-2": string;
+    readonly "number5-2": string;
+    readonly "number6-2": string;
+    readonly "number7-2": string;
+    readonly "number8-2": string;
+    readonly "number9-2": string;
+    readonly "o-maru-2": string;
+    readonly "overlay-2": string;
+    readonly "paper-2": string;
+    readonly "pen-2": string;
+    readonly "person-2": string;
+    readonly "phone-1": string;
+    readonly "phone-browser-2": string;
+    readonly "phone-3": string;
+    readonly "pie-chart-3-2": string;
+    readonly "pie-chart-2": string;
+    readonly "pin-1": string;
+    readonly "pin-3": string;
+    readonly "plane-2": string;
+    readonly "plus-2": string;
+    readonly "podium-2": string;
+    readonly "point-center-2": string;
+    readonly "point-2": string;
+    readonly "question-mark-2": string;
+    readonly "raft-2": string;
+    readonly "retail-tag-2": string;
+    readonly "right-to-forget-2": string;
+    readonly "ring-2": string;
+    readonly "rocket-2": string;
+    readonly "smb-building-2": string;
+    readonly "scale-1": string;
+    readonly "scale-3": string;
+    readonly "scan-2": string;
+    readonly "server-2": string;
+    readonly "shake-love-2": string;
+    readonly "shared-users-2": string;
+    readonly "shield-2-tone-2": string;
+    readonly "shield-check-2": string;
+    readonly "shield-varified-2": string;
+    readonly "slice-2": string;
+    readonly "slider-2": string;
+    readonly "solid-arrow-down-2": string;
+    readonly "solid-arrow-right-2": string;
+    readonly "solid-check-2": string;
+    readonly "solid-checkmark-2": string;
+    readonly "solid-clock1-2": string;
+    readonly "solid-clock2-2": string;
+    readonly "solid-compass-2": string;
+    readonly "solid-dollar-sign-2": string;
+    readonly "solid-exclamation-mark-2": string;
+    readonly "solid-minus-2": string;
+    readonly "solid-o-maru-2": string;
+    readonly "solid-play-2": string;
+    readonly "solid-plus-2": string;
+    readonly "solid-question-mark-2": string;
+    readonly "solid-x-batsu-2": string;
+    readonly "speach-bubble-2": string;
+    readonly "spotlight-2": string;
+    readonly "spray-bottle-2": string;
+    readonly "squares-scale-top-2": string;
+    readonly "squares-scale-2": string;
+    readonly "squares-together-2": string;
+    readonly "star-2": string;
+    readonly "stop-hand-2": string;
+    readonly "storage-cloud-2": string;
+    readonly "storage-key-2": string;
+    readonly "storage-2": string;
+    readonly "sun-2": string;
+    readonly "target-2": string;
+    readonly "team-add-2": string;
+    readonly "team-2": string;
+    readonly "thumb-2": string;
+    readonly "toggle-2": string;
+    readonly "tools-2": string;
+    readonly "trophy-2": string;
+    readonly "truck-2": string;
+    readonly "two-files-2": string;
+    readonly "typing-now-2": string;
+    readonly "typing-2": string;
+    readonly "usb-2": string;
+    readonly "up-down-2": string;
+    readonly "upload-cloud-2": string;
+    readonly "upload-2": string;
+    readonly "user-alert-2": string;
+    readonly "user-verified-unknown-2": string;
+    readonly "user-verified-2": string;
+    readonly "user-badge-2": string;
+    readonly "user-primary-2": string;
+    readonly "user-timed-2": string;
+    readonly "video-camera-1": string;
+    readonly "video-camera-3": string;
+    readonly "video-2": string;
+    readonly "white-arrow-right": string;
+    readonly "white-check": string;
+    readonly "white-plus": string;
+    readonly "white-stop": string;
+    readonly "writing-2": string;
+    readonly "x-batsu-2": string;
+    readonly "zones-2": string;
+    readonly "play-2": string;
+};
+export { boxGeneratedIconCounts, boxGeneratedIconKeys, boxGeneratedIconMetadata, boxGeneratedIcons, };