native-document 1.0.168 → 1.0.169

package/src/ui/components/icon/phosphor/PhosphorIconRender.js

@@ -0,0 +1,71 @@
+import './phosphor.css';
+import MAP from './phosphor.map.js';
+import { Span } from '../../../../core/elements';
+
+const SIZES = {
+    small:      16,
+    medium:     24,
+    large:      32,
+    extraLarge: 48,
+};
+
+// Variant -> CSS weight class
+// regular uses 'ph' (no suffix), others use 'ph-{variant}'
+const VARIANT_CLASS = {
+    thin:    'ph-thin',
+    light:   'ph-light',
+    regular: 'ph',
+    bold:    'ph-bold',
+    fill:    'ph-fill',
+    duotone: 'ph-duotone',
+};
+
+/**
+ * Renders a Phosphor icon as a <span> element using CSS webfont classes.
+ *
+ * Variants: thin, light, regular (default), bold, fill, duotone
+ * Each variant requires its own CSS - see phosphor.css.
+ *
+ * @param {object} $desc
+ * @param {string} $desc.name
+ * @param {'thin'|'light'|'regular'|'bold'|'fill'|'duotone'|Observable<string>|null} $desc.variant
+ * @param {'small'|'medium'|'large'|'extraLarge'|number|Observable<string|number>|null} $desc.size
+ * @param {string|Observable<string>|null} $desc.color
+ * @returns {HTMLElement}
+ */
+export default function PhosphorIconRender($desc) {
+    const phosphorName = MAP[$desc.name] ?? $desc.name;
+    const style        = {};
+
+    let className;
+
+    if($desc.variant?.__$Observable) {
+        className = $desc.variant.transform((variant) => {
+            const weightClass = VARIANT_CLASS[variant] ?? 'ph';
+            return `${weightClass} ph-${phosphorName}`;
+        });
+    } else {
+        const weightClass = VARIANT_CLASS[$desc.variant] ?? 'ph';
+        className = `${weightClass} ph-${phosphorName}`;
+    }
+
+    if($desc.size?.__$Observable) {
+        style.fontSize = $desc.size.transform((size) => {
+            const px = typeof size === 'number' ? size : (SIZES[size] ?? SIZES.medium);
+            return `${px}px`;
+        });
+    } else {
+        const px = typeof $desc.size === 'number' ? $desc.size : (SIZES[$desc.size] ?? SIZES.medium);
+        style.fontSize = `${px}px`;
+    }
+
+    if($desc.color) {
+        style.color = $desc.color;
+    }
+
+    return Span({
+        'aria-hidden': 'true',
+        class: className,
+        style,
+    });
+}

package/src/ui/components/icon/phosphor/phosphor.css

@@ -0,0 +1,17 @@
+/*
+ * Phosphor Icons webfont
+ * Install : npm install @phosphor-icons/web
+ *
+ * Each variant requires its own CSS file.
+ * Import only the variants you need to keep bundle size minimal.
+ */
+/*@import '@phosphor-icons/web/src/regular/style.css';*/
+
+/*
+ * Uncomment the variants you need:
+ */
+/* @import '@phosphor-icons/web/src/thin/style.css';    */
+/* @import '@phosphor-icons/web/src/light/style.css';   */
+/* @import '@phosphor-icons/web/src/bold/style.css';    */
+/* @import '@phosphor-icons/web/src/fill/style.css';    */
+/* @import '@phosphor-icons/web/src/duotone/style.css'; */

package/src/ui/components/icon/phosphor/phosphor.map.js

@@ -0,0 +1,165 @@
+export default {
+    // Navigation
+    arrowLeft:      'arrow-left',
+    arrowRight:     'arrow-right',
+    arrowUp:        'arrow-up',
+    arrowDown:      'arrow-down',
+    chevronLeft:    'caret-left',
+    chevronRight:   'caret-right',
+    chevronUp:      'caret-up',
+    chevronDown:    'caret-down',
+    home:           'house',
+    menu:           'list',
+    close:          'x',
+    back:           'arrow-left',
+    forward:        'arrow-right',
+    expand:         'arrows-out',
+    collapse:       'arrows-in',
+    fullscreen:     'arrows-out-simple',
+    fullscreenExit: 'arrows-in-simple',
+
+    // Actions
+    search:         'magnifying-glass',
+    filter:         'funnel',
+    sort:           'arrows-down-up',
+    edit:           'pencil-simple',
+    delete:         'trash',
+    add:            'plus',
+    remove:         'minus',
+    save:           'floppy-disk',
+    copy:           'copy',
+    download:       'download-simple',
+    upload:         'upload-simple',
+    share:          'share-network',
+    refresh:        'arrows-clockwise',
+    more:           'dots-three',
+    settings:       'gear-six',
+    drag:           'dots-six-vertical',
+    resize:         'corners-out',
+    undo:           'arrow-counter-clockwise',
+    redo:           'arrow-clockwise',
+    scan:           'scan',
+    print:          'printer',
+    import:         'upload',
+    export:         'export',
+
+    // Feedback
+    check:          'check',
+    checkCircle:    'check-circle',
+    error:          'x-circle',
+    warning:        'warning',
+    info:           'info',
+    help:           'question',
+    loading:        'circle-notch',
+    success:        'check-circle',
+
+    // User
+    user:           'user',
+    userCircle:     'user-circle',
+    users:          'users',
+    lock:           'lock',
+    unlock:         'lock-open',
+    eye:            'eye',
+    eyeOff:         'eye-slash',
+    bell:           'bell',
+    notification:   'bell-ringing',
+
+    // Files & Media
+    file:           'file',
+    folder:         'folder',
+    image:          'image',
+    document:       'file-text',
+    attachment:     'paperclip',
+    link:           'link',
+    externalLink:   'arrow-square-out',
+    play:           'play',
+    pause:          'pause',
+    stop:           'stop',
+    mute:           'speaker-slash',
+    sound:          'speaker-high',
+    video:          'video',
+    camera:         'camera',
+
+    // Interface
+    grid:           'squares-four',
+    list:           'list',
+    calendar:       'calendar',
+    clock:          'clock',
+    tag:            'tag',
+    tags:           'tag',
+    qrCode:         'qr-code',
+    barcode:        'barcode',
+
+    // Text editing
+    bold:           'text-b',
+    italic:         'text-italic',
+    underline:      'text-underline',
+    strikethrough:  'text-strikethrough',
+    alignLeft:      'text-align-left',
+    alignCenter:    'text-align-center',
+    alignRight:     'text-align-right',
+    alignJustify:   'text-align-justify',
+    orderedList:    'list-numbers',
+    unorderedList:  'list-bullets',
+    indent:         'text-indent',
+    outdent:        'text-outdent',
+    scissors:       'scissors',
+    fontColor:      'text-aa',
+    highlight:      'highlighter-circle',
+
+    // Data & charts
+    barChart:       'chart-bar',
+    lineChart:      'chart-line',
+    pieChart:       'chart-pie',
+    areaChart:      'chart-line-up',
+    table:          'table',
+    database:       'database',
+
+    // Commerce & finance
+    shoppingCart:   'shopping-cart',
+    creditCard:     'credit-card',
+    wallet:         'wallet',
+    bank:           'bank',
+    gift:           'gift',
+    percentage:     'percent',
+    dollar:         'currency-dollar',
+    euro:           'currency-eur',
+
+    // Communication
+    mail:           'envelope',
+    message:        'chat-text',
+    comment:        'chat',
+    phone:          'phone',
+
+    // System & dev
+    cloud:          'cloud',
+    cloudUpload:    'cloud-arrow-up',
+    cloudDownload:  'cloud-arrow-down',
+    api:            'plugs',
+    code:           'code',
+    bug:            'bug',
+    tool:           'wrench',
+    robot:          'robot',
+
+    // Location
+    map:            'map-trifold',
+    compass:        'compass',
+    global:         'globe',
+    location:       'map-pin',
+
+    // Shapes & objects
+    star:           'star',
+    heart:          'heart',
+    flag:           'flag',
+    trophy:         'trophy',
+    medal:          'medal',
+    rocket:         'rocket',
+    fire:           'fire',
+    thunder:        'lightning',
+    smile:          'smiley',
+    frown:          'smiley-melting',
+    like:           'thumbs-up',
+    dislike:        'thumbs-down',
+    safety:         'shield-check',
+    key:            'key',
+};

package/src/ui/components/icon/tabler/TablerIconRender.js

@@ -0,0 +1,59 @@
+import MAP from './tabler.map.js';
+import {Italic, Span} from '../../../../core/elements';
+
+const SIZES = {
+    small:      16,
+    medium:     24,
+    large:      32,
+    extraLarge: 48,
+};
+
+import './tabler.css';
+
+/**
+ * Renders a Tabler icon as an <i> element using CSS webfont classes.
+ *
+ * Variants:
+ *   - outline (default) : ti ti-{name}          requires tabler-icons.css
+ *   - fill              : ti ti-{name}-filled    requires tabler-icons-filled.css
+ *
+ * @param {object} $desc
+ * @param {string} $desc.name
+ * @param {'outline'|'fill'|null} $desc.variant
+ * @param {'small'|'medium'|'large'|'extraLarge'|number|null} $desc.size
+ * @param {string|null} $desc.color
+ * @returns {HTMLElement}
+ */
+export default function TablerIconRender($desc) {
+    const tablerName = MAP[$desc.name] ?? $desc.name;
+    const style = {};
+
+    let className = '';
+    if($desc.variant?.__$Observable) {
+        className = $desc.variant.format((variant) => {
+            if(variant === 'fill') {
+                return `ti ti-${tablerName}-filled`;
+            }
+            return `ti ti-${tablerName}`;
+        });
+    } else {
+        className = ($desc.variant === 'fill') ? `ti ti-${tablerName}-filled` : `ti ti-${tablerName}`;
+    }
+
+    let px;
+
+    style.fontSize = $desc.size?.__$Observable
+        ? $desc.size.transform((size) => `${typeof size === 'number' ? size : (SIZES[size] ?? SIZES.medium)}px`)
+        : `${typeof $desc.size === 'number' ? $desc.size : (SIZES[$desc.size] ?? SIZES.medium)}px`;
+
+    if($desc.color) {
+        style.color = $desc.color;
+    }
+    console.log(style);
+
+    return Italic({
+        'aria-hidden': 'true',
+        style,
+        class: className,
+    });
+}

package/src/ui/components/icon/tabler/tabler.css

@@ -0,0 +1,14 @@
+/*
+ * Tabler Icons webfont
+ * Outline : @tabler/icons-webfont/tabler-icons.css
+ * Filled  : @tabler/icons-webfont/tabler-icons-filled.css
+ *
+ * Install : npm install @tabler/icons-webfont
+ */
+/*@import '@tabler/icons-webfont/tabler-icons.css';*/
+
+/*
+ * Uncomment to enable filled variant (ti ti-{name}-filled)
+ * Note: filled and outline use separate font files
+ */
+/* @import '@tabler/icons-webfont/tabler-icons-filled.css'; */

package/src/ui/components/icon/tabler/tabler.map.js

@@ -0,0 +1,165 @@
+export default {
+    // Navigation
+    arrowLeft:      'arrow-left',
+    arrowRight:     'arrow-right',
+    arrowUp:        'arrow-up',
+    arrowDown:      'arrow-down',
+    chevronLeft:    'chevron-left',
+    chevronRight:   'chevron-right',
+    chevronUp:      'chevron-up',
+    chevronDown:    'chevron-down',
+    home:           'home',
+    menu:           'menu-2',
+    close:          'x',
+    back:           'arrow-back',
+    forward:        'arrow-forward',
+    expand:         'arrows-maximize',
+    collapse:       'arrows-minimize',
+    fullscreen:     'maximize',
+    fullscreenExit: 'minimize',
+
+    // Actions
+    search:         'search',
+    filter:         'filter',
+    sort:           'arrows-sort',
+    edit:           'pencil',
+    delete:         'trash',
+    add:            'plus',
+    remove:         'minus',
+    save:           'device-floppy',
+    copy:           'copy',
+    download:       'download',
+    upload:         'upload',
+    share:          'share',
+    refresh:        'refresh',
+    more:           'dots',
+    settings:       'settings',
+    drag:           'grip-horizontal',
+    resize:         'resize',
+    undo:           'arrow-back-up',
+    redo:           'arrow-forward-up',
+    scan:           'scan',
+    print:          'printer',
+    import:         'file-import',
+    export:         'file-export',
+
+    // Feedback
+    check:          'check',
+    checkCircle:    'circle-check',
+    error:          'circle-x',
+    warning:        'alert-triangle',
+    info:           'info-circle',
+    help:           'help-circle',
+    loading:        'loader-2',
+    success:        'circle-check',
+
+    // User
+    user:           'user',
+    userCircle:     'user-circle',
+    users:          'users',
+    lock:           'lock',
+    unlock:         'lock-open',
+    eye:            'eye',
+    eyeOff:         'eye-off',
+    bell:           'bell',
+    notification:   'bell-ringing',
+
+    // Files & Media
+    file:           'file',
+    folder:         'folder',
+    image:          'photo',
+    document:       'file-text',
+    attachment:     'paperclip',
+    link:           'link',
+    externalLink:   'external-link',
+    play:           'player-play',
+    pause:          'player-pause',
+    stop:           'player-stop',
+    mute:           'volume-off',
+    sound:          'volume',
+    video:          'video',
+    camera:         'camera',
+
+    // Interface
+    grid:           'layout-grid',
+    list:           'list',
+    calendar:       'calendar',
+    clock:          'clock',
+    tag:            'tag',
+    tags:           'tags',
+    qrCode:         'qrcode',
+    barcode:        'barcode',
+
+    // Text editing
+    bold:           'bold',
+    italic:         'italic',
+    underline:      'underline',
+    strikethrough:  'strikethrough',
+    alignLeft:      'align-left',
+    alignCenter:    'align-center',
+    alignRight:     'align-right',
+    alignJustify:   'align-justified',
+    orderedList:    'list-numbers',
+    unorderedList:  'list',
+    indent:         'indent-increase',
+    outdent:        'indent-decrease',
+    scissors:       'scissors',
+    fontColor:      'letter-case',
+    highlight:      'highlight',
+
+    // Data & charts
+    barChart:       'chart-bar',
+    lineChart:      'chart-line',
+    pieChart:       'chart-pie',
+    areaChart:      'chart-area',
+    table:          'table',
+    database:       'database',
+
+    // Commerce & finance
+    shoppingCart:   'shopping-cart',
+    creditCard:     'credit-card',
+    wallet:         'wallet',
+    bank:           'building-bank',
+    gift:           'gift',
+    percentage:     'percentage',
+    dollar:         'currency-dollar',
+    euro:           'currency-euro',
+
+    // Communication
+    mail:           'mail',
+    message:        'message',
+    comment:        'message-circle',
+    phone:          'phone',
+
+    // System & dev
+    cloud:          'cloud',
+    cloudUpload:    'cloud-upload',
+    cloudDownload:  'cloud-download',
+    api:            'api',
+    code:           'code',
+    bug:            'bug',
+    tool:           'tool',
+    robot:          'robot',
+
+    // Location
+    map:            'map',
+    compass:        'compass',
+    global:         'world',
+    location:       'map-pin',
+
+    // Shapes & objects
+    star:           'star',
+    heart:          'heart',
+    flag:           'flag',
+    trophy:         'trophy',
+    medal:          'medal',
+    rocket:         'rocket',
+    fire:           'flame',
+    thunder:        'bolt',
+    smile:          'mood-smile',
+    frown:          'mood-sad',
+    like:           'thumb-up',
+    dislike:        'thumb-down',
+    safety:         'shield-check',
+    key:            'key',
+};

package/src/ui/index.js

@@ -43,5 +43,10 @@ export { default as ListDividerRender } from './components/list/divider/ListDivi
 
 export { default as CardRender } from './components/card/CardRender';
 
+
+export { default as TablerIconRender } from './components/icon/tabler/TablerIconRender';
+export { default as MaterialIconRender } from './components/icon/material/MaterialIconRender';
+export { default as PhosphorIconRender } from './components/icon/phosphor/PhosphorIconRender';
+
 export * from './components/stacks';
 export * from './components/form';